[Petec]

Hi there,

As the title explains, I put the following in the misc/custom css:

#front-text1 h1, #front-text2 h1 {
font-size: 18px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 25px;
text-transform: uppercase;
font-weight: normal;
font-family: “Fjalla One”;
}

The problem is that when resizing the browser, ie viewing the page on a mobile device, the text increases in size , back up to 26px

How to solve this?

Zed advised to put in:

@media (max-width: 650px) { #front-text1 h1, #front-text2 h1 {font-size:10px;line- height:1em;} }

But the text is still not responsive and increases in size.

Kind regards,

[Jim]

Hi Petec

I had a similar issue and managed to resolve it, maybe there is something in the content of the post below might be of help.

http://www.cryoutcreations.eu/forums/t/un-responsive-title-text

Cheers

Jim…

[Petec]

Hi Jim and thanks for the reply.

I found the following in the mobile.css

#front-text1 h1, #front-text2 h1 {
font-size: 2em;
line-height: 1.3em;
}

And all I had to do was change the the font size to to following ( I also changed the line height for a bit extra seperation):

#front-text1 h1, #front-text2 h1 {
font-size: 1.3em;
line-height: 1.5em;
}

Tested and this works for me. I know it’s the main mobile css, but this is such a minor thing to edit in future updates, I really don’t care 🙂

Thanks again for your help!

[Author]

Posts