Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 18, 2015 at 7:35 am #413429
    ShortieD

    Hey Folks –

    I’m trying to reduce the size of the page titles on smartphones and tablets.

    I’ve added this media query at the top of my stylesheet

    /* iPhone (portrait) and up ———– */
    @media only screen and (min-width : 321px) and (max-width : 1024px){
    #top .alternate_color.title_container .main-title a{
    font-size: 10px !important;
    }
    }

    It works when I reduce the size of the browser but not on my mobile device.

    Is there something I’m missing?

    Cheers

    March 18, 2015 at 12:01 pm #413537
    ShortieD

    sorry and here is the link to a page with the title I’m trying to target.

    http://queenswharf.org/enterprises-at-queens-wharf/

    March 18, 2015 at 10:11 pm #414011
    Josue

    Hi!

    Try with this code instead:

    @media only screen and (max-width: 767px) {
#top .alternate_color.title_container .main-title a{
   font-size: 14px !important;
}

    Best regards,
    Josue

    March 19, 2015 at 2:03 am #414086
    ShortieD

    perfect – what was I doing wrong?

    March 19, 2015 at 2:10 am #414091
    Josue

    Hi,

    The min-width was unnecessary in the media query.

    Regards,
    Josue

    March 19, 2015 at 3:27 am #414120
    ShortieD

    thanks – appreciate the help

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘media query not working for site’ is closed to new replies.