Media Queries Not Working

[LeaChristine]

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 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;
}

}

http://www.leachristinedesigns.com/

[David Chu]

Hi,
Wow, that's complex. 🙂 I don't have an exact answer, but I have ideas.

I never find the occasion to use min-width on queries (yet), I stick to max-width so my brain doesn't implode. 🙂 But your syntax does look valid, so I'm guessing that it's fine!

I do see one big suspect - the vaunted, but somewhat piggish, Revolution Slider is pumping out inline CSS, and I can see it overriding your CSS at certain breakpoints. That's probably it, I think. So to override that you'll have to view source and see all its own inline media query CSS. Hopefully then all you'll need to do is make your media queries a bit more specific to override those.

I can't recall, but Rev Slider may actually have a spot to put in your own CSS, and that may possible make this easier.

Good luck!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[LeaChristine]

Well, slider issues aside, none of the coding in my media queries is being accepted, even if I remove the min-width and do something like below-- I can't even get something basic like the background to change color...

@media only screen and (max-width: 768px) {

body {
background-color: red;
}

.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 (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;
}

}

[Author]

Posts