• Closed
  • steven wilson
    Spectator
    June 20, 2014 at 6:25 pm #8493

    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.

    Roman
    Spectator
    Posts: 3147
    June 21, 2014 at 7:08 pm #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
    Posts: 22
    June 22, 2014 at 12:47 am #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
    Spectator
    Posts: 3147
    June 22, 2014 at 9:15 am #10075

    yep, this is how the responsivness works 🙂