HELP URGENT: Header Custom Text Position

Please Help!

Hi, I am trying to align the Header text from .gk-header1 p inside the white board that's held by my picture male model. I just can't do it! I've tried for about 4 hours. I have learned a lot, but now I need help.

URL: http://www.quebecguitare.ca/

Could you please provide the @media CSS for all resolution in order to have the text at the right place?

320 x 480
480 x 800
640 x 960
768 x 1280
1024 x 768
1366 x 768
1280x 800
1366x 768
1280x 1024
1680x 1050


The text is the following:

Code: Select all


Nous offrons des cours de guitare privés avec suivi en ligne. Visitez notre site pour plus d'informations. Vous pouvez aussi nous contacter via le formulaire d'admission au bas de cette page ou par téléphone à Québec.


So far I have used the following CSS variation (please use as a reference with the color and text shadow:

Code: Select all

@media (max-width : 1024px) {
.gk-header1 p {
   color: #000000;
   font-size: 10px;
   line-height: 1.8;
   margin: 0;
   position: absolute;
   z-index: 1;
        right: 50px;
   text-shadow: 2px 2px 7px rgba(150, 150, 150, 1);
}
}



I have disabled the text .gk-header1 p in the override in the mean time because this is a production site. But once you start working just get rid of the code used to disable it in override:

Code: Select all

/* temporary disable for GAVICK Tech Team */

@media (max-width : 3000px) {
.gk-header1 p {
    display: none;
}
}




Hi

This is almost impossible. You will have to write a position for every screen width. In such cases it's easier to but the text into the image so it will resize with image.

That is what I want to do for SEO purposes. The text will be invisible from search engines if I simply add it to the jpg.

Please give guidelines and I will start from that.

Thank you
Regards

Is there anyway to use @media="(max-width: 1000px) in conjunction with @media="(min-width: 800px) in order to create a condition that would return true in between the two values?

If not, how would you do it?

PS.: I am using text in the jpg for now...

Thank you.
Regards

Hi

You can use construction like:

Code: Select all

@media only screen and (min-width:800px) and (max-width: 1000px) {
}


I would still put the text into the image and for SEO add this text with text hidden from users but not robots:

Code: Select all

<div style="position: absolute; top: -999em;">Text to hide</div>


It seems to work and it's a brilliant idea Teitbite!

I've used H1 tags in it.

Code: Select all

<div style="position: absolute; top: -999em;"><h1>hidden text</h1></div>


Regards

Hi

Haha. Looks like my best quality is to think of how to work less This is for sure fastest solution than to position text and its size for every screen width.

Yeah, but you are still reasonable in your solutions!

Most people will go for the simplest fix at any cost.
Settling for a lesser solution, but you do not!
Great asset for you, keep up the great work!

Happy new year 2015!
Best Regards