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 width
s , 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
Post a Comment