css - media queries mis-read classes they contain -


trying make webstore responsive. i've made set of media queries, 1 max-width:1200px , 1 max-width:768px.

in these media queries have 2 classes. media queries work fine .h5_green_left affect .web_description class main css declaration of class (outside of media query) replaced 768px media query declaration.

to see if media queries working, i've exaggerated font-sizes .web_description class. can see in action here.

where there product description in upper left corner h5_green_left followed unordered list .web_description.

you can see first class change viewport shrinking second class remains same viewport widths , not class declared in original class description.

code below:

.h5_green_left {     font-family: arial, helvetica, sans-serif;     font-size: 15px;     font-style: normal;     font-weight: 400;     font-variant: normal;     color: #009900;     padding-left: 4px;  .web_description {     font-family: arial, helvetica, sans-serif;     font-size: 30px;     font-style: normal;     font-weight: 300;     color: #009900;     text-align: left; } @media screen , (max-width: 1200px){     .h5_green_left {         font-size: 13px;}     .web_description {         font-size: 20px;}     .h1_tan_italic_l {         font-size: 24px;     } }  @media screen , (max-width: 768px){     .h5_green_left {         font-size: 11px;}}     .web_description {         font-size: 12px;}     .h1_tan_italic_l {         font-size: 15px;     } } 

why media queries perform correctly .h5_green_left class , same media queries fail .web_description class?

here problem:

missing closing brace in main css right before .web_description

padding-left: 4px;  .web_description { 

and double brace closing in media query max-width:768px :

.h5_green_left {     font-size: 11px;}} 

Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -