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
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
