@media query for 3 colum footer

[Amol]

Hello everyone,

I am a new bee with css, Pls advice me what is wrong with my media query for 3 column footer
Following is the code is used to style the footer
/* Footer styling
—————————————————————————————————- */
.footer-widgets-1.widget-area {
float: left;
width: 33%;
padding: 40px;

}

.footer-widgets-2.widget-area {
float: left;
width: 33%;
padding: 40px;
}
.footer-widgets-3.widget-area {
float: left;
padding: 40px;
width: 33%;
}
@media only screen and (max-width: 1023px){
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, footer-widgets-1 widget-area, footer-widgets-2 widget-area, footer-widgets-3 widget-area {
width: 100%;
}
}url to staging site http://anubha.wpengine.com/contract-and-lease-abstraction-services/

[Beverleyh]

Going on what you’ve posted, the syntax for your classes is wrong in all of your media queries. You’ve missed the dots.

e.g. Looks like;

footer-widgets-2 widget-area,

Should be;

.footer-widgets-2.widget-area,

(3 times in each media query) untested – on mobile.

[Amol]

thanks so much it worked.

[Author]

Posts