How to make Second Title text on Presentation Page, responsive

Forums » WordPress » Parabola » How To

  • Author
    Posts
  • February 7th, 2014 at 21:44 #21776
    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,

    February 8th, 2014 at 06:20 #21783
    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…

    February 8th, 2014 at 08:16 #21786
    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
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘How to make Second Title text on Presentation Page, responsive’ is closed to new replies.