• Creator
    Topic
  • June 20, 2014 at 6:25 pm #8493

    steven wilson
    Spectator
    Been thanked: 0 times

    When the site is viewed on a phone, the responsive nature of the site works well except the site title and tagline are way too big for the phone screen. I cannot see a way to target their font sizes with CSS without affecting the global font size (i.e. I want to change the line-height and font-size attributes but only for the site title when the site is being viewed on a phone). I tried adding .responsive to the existing #logo and #logo a CSS (like I can do with .sticky-header) but that didn’t work.

  • Creator
    Topic
Viewing 3 replies - 1 through 3 (of 3 total)
Replies
  • Roman
    Keymaster
    June 21, 2014 at 7:08 pm
    Post count: 2538
    Been thanked: 29 times
    #10066 |

    try this in the Custom CSS section:

    Code:
    @media only screen and (max-width: 768px){
    #logo, #logo a { font-size:12px; }
    #tagline { font-size:10px; }
    }
    steven wilson
    Spectator
    June 22, 2014 at 12:47 am
    Post count: 22
    Been thanked: 0 times
    #10072 |

    BLEW MY MIND!! absolutely perfect, exactly what I needed. thank you!

    (for anyone who looks this up, there are additional options which you can target:

    @media only screen and (min-width: 1024px) and (max-width: 1199px){
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px){
    }
    @media only screen and (min-width: 480px) and (max-width: 767px){
    }
    @media only screen and (min-width: 0px) and (max-width: 479px){
    }

    basically, you figure out what you want each screen size to show and then insert that CSS into the proper area above. you nest the {{}} statements.

    Roman
    Keymaster
    June 22, 2014 at 9:15 am
    Post count: 2538
    Been thanked: 29 times
    #10075 |

    yep, this is how the responsivness works 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.