Add Text to header

[Palido]

Hi,

 

i want to add some text between the logo and the search bar, or underneath the search bar. Where do I need to put the text?

 

I should also resize when someone visits the site with a tablet or a mobile phone?

 

I hope someone has a solution for me

 

Regards,

Palido

[vekia]

html block free (use top hook) + code like:

<div style="position:absolute; left:40px; top: 30px;">
my text
</div>

[Palido]

thanks for your quick reply.

 

Module ist top, but when I use top hook the text does not appear at all, when I use header the text is on top of the screen?!

 

Do I make something wrong?

[vekia]

header - don't use this hook to display contents, it's a hook to load libraries like css/js etc.

 

regarding to the top section

can you please share url to your shop?

[Palido]

ok thanks for the information.

 

URL: http://www.palido.at/

[vekia]

okay i seenow.

you don't see this after adding to display top because of slider

it changes visibility of all elements after it.

 

go to modules > positions

search for displayTop modules list and move free html box module to the top (it must be first on the list) then text will appear.

 

 

 

of course you can manipulate position of this text with different left and top values

[Palido]

ok thanks for that - and how can i position it that it is also shown on the mobile version of the site?

[vekia]

you have to use media queries.

for example:

 

change code to:

<div style="position:absolute; left:40px; top: 30px;" class="myText">
my text
</div>

and use these styles

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.myText {
position:absolute!important;
left:0px;
top:0px;
}
}

[Palido]

thx for the tips.

 

Where do I have to put the styles?

[vekia]

you can put it in the module like:

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
.myText {
position:absolute!important;
left:0px;
top:0px;
}
}
</style>

or paste somewhere in your global stylesheet file (global.css)

[Palido]

ok on different desktop sizes it works fine. But on mobile devices, especially on mobile phones the text appears behind the logo.

 

Screenfly: http://quirktools.com/screenfly/#u=http%3A//www.palido.at&w=320&h=533&a=34&s=1

 

The text should also be a little bigger, is this possible. If yes, how?

[vekia]

ok so try to use code with:

<div style="" class="container_9">
my text
</div>

will see what's going on on other devices

[Palido]

http://quirktools.com/screenfly/#u=http%3A//www.palido.at&w=320&h=533&a=34&s=1

 

I use this code: 

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
.container_9 {
position:absolute!important;
left:0px;
top:0px;
}
}
</style>

<div style="position:absolute; left:25%; top: 130px; font-size:10.5pt;" class="container_9">
Online Shop in Kooperation mit den Palido Partnerjuwelieren!
</div>

[Palido]

when I use the code as in my previous post on desktop pc's it looks fine.

 

On an mobile phone the text is behind the logo: http://pl.vc/5h1cy

 

On an Ipad the whole site is crashed: http://pl.vc/2qzf8

 

Do you know how to fix this?

[vekia]

hello

problem on ipad appears only when you use code that i suggested to use? :|

[Palido]

With this code the problem appears on ipad and iphone:

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
.container_9 {
position:absolute!important;
left:0px;
top:0px;
}
}
</style>

<div style="position:absolute; left:25%; top: 130px; font-size:10.5pt;" class="container_9">
Online Shop in Kooperation mit den Palido Partnerjuwelieren!
</div>

[vekia]

<div style="" class="mycontainer_9">
my text
</div>

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
.mycontainer_9 {
position:absolute!important;
left:0px;
top:0px;
}
}
</style>

can you try with this

[Palido]

I used exactly the code you proposed it looks like this:

 

http://postimg.org/image/mrrhz3nyx/

 

How do I get the text centered and beneath the search box - but it should also look good on iphone and ipad?