Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16371

    Hi there, I’m trying to use media queries to change a few things on my site layout. The first one should have been easy but I can’t seem to make it work. Basically I want to reduce the font size of my category menu. I have followed the instructions given in previous posts but can’t get it to work.

    The custom styling for my category menu (that you guys helped me, so thanks!) is this:

    #top .widget_product_categories ul{overflow: hidden;padding:0;margin:0;}

    .widget_product_categories li{font-family: Arial !important; font-size: 20px; font-weight: bold; padding:10px 1px !important; colour:#999999;}

    .widget_product_categories li a {padding: 20px 20px 20px 0px !important; background: none !important;}

    .widget_product_categories .children li{padding: 2px 0px 12px 0px;}

    .widget_product_categories li a{font-size: 20px;font-style: normal; padding-bottom: 20px;}

    li.current-cat a {color: #cc9999 !important;}

    I just want to change the font down to 16px. So in my custom style sheet I did this:

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    .widget_product_categories li{ font-size: 16px! important;}

    .widget_product_categories li a{font-size: 16px !important;}

    }

    but it made no difference at all.

    Can you help me figure out what I am doing wrong?

    Many thanks!

    Susan

    #91268

    Hi Susan,

    There might be some funkiness happening with the the overuse of !important but I can’t say for sure without taking a look. If you have a link where we can see it live we might be able to help figure it out.

    Regards,

    Devin

    #91269

    Hi Devin, here is a link to the site

    http://s154267.gridserver.com/

    grateful for any advice you can offer as there are quite a few media query customisations I need to make…

    Susan

    #91270

    Try:

    @media only screen and (max-width: 959px) and (min-width: 768px) {
    #top .widget_product_categories ul li a {font-size: 16px;}
    }

    The size you were trying to use already makes the sidebar drop below the main content/shop area so no need to modify its size. The above however is the size used just before then.

    Regards,

    Devin

    #91271

    That’s brilliant! Thanks so much. susan

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘media queries in Propulsion’ is closed to new replies.