Media Queries not Working
-
Hi guys, so I am having an issue with my media queries and I’m not sure why– in my child theme, I am trying to scale the slider on my homepage and also re-space my footer widgets for different screen sizes– the 320px/iphone resolution is working fine, but for some reason when I try to do media queries for larger screen sizes like 480 or 768, all my code is being ignored. I’m almost positive I have my brackets in the right place, so can anyone tell me what I’m doing wrong? I don’t think this is a theme-related issue because my code for one media query is working, just none of the others… I appreciate any pointers, thanks!
Here is what I have:
/* MEDIA QUERIES
———————————————————–*/@media only screen and (min-width: 501px) and (max-width: 768px) {
.site-footer {
float: center;
text-align: center;
margin-top: -60px !important;
}.footer-widgets {
float: center;
text-align: center;
margin-top: -60px !important;
}#rev_slider_3_1, #rev_slider_3_1_wrapper {
width: 600px !important;
height: auto;
margin-right: _15px !important;
float: center;
}.footer-widgets-3 {
padding-bottom: 100px;
}
}@media only screen and (min-width: 451px) and (max-width: 500px) {
#rev_slider_3_1, #rev_slider_3_1_wrapper {
width: 400px !important;
height: auto;
}.tp-leftarrow {
display: none !important;
}.tp-rightarrow {
display: none !important;
}}
@media only screen and (max-width: 450px) {
.tp-leftarrow {
display: none !important;
}.tp-rightarrow {
display: none !important;
}#rev_slider_3_1, #rev_slider_3_1_wrapper {
width: 288px !important;
height: auto;}
.entry-content {
margin-top: -80px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}.site-inner {
margin-top: -20px !important;
}.entry {
padding-bottom: 0 !important;
}body {
background-size: contain;
background-color: #fff;
font-size: 16px;
}.site-inner,
.wrap {
padding-left: 5%;
padding-right: 5%;
padding-bottom: 0 !important;
}.archive-description,
.author-box,
.comment-respond,
.entry,
.entry-comments,
.entry-pings,
.sidebar .widget,
.site-header {
padding: 0 !important;}
.entry{
margin-top: -40px !important;
}.entry-content {
margin-top: -40px !important;}
.footer-widgets-1 {
margin-top: -60px !important;
}.footer-widgets-3 {
padding-bottom: 20px !important;}
.archive-pagination li a {
margin-bottom: 4px;
}.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}.sidebar .widget.enews-widget {
padding: 0 !important;
}.metaslider {
width: 260px !important;
height: auto;
padding-bottom: 0;}
#metaslider_271 {
width: 260px !important;
height: auto;
padding-bottom: 0;
}#metaslider_container_271 {
width: 260px !important;
height: auto;
padding-bottom: 0;
}}
The topic ‘Media Queries not Working’ is closed to new replies.