Media Query Help!

[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-- so far, I am just trying to resize the homepage slider and make sure the footer widgets are fitted correctly:


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

}

[Beverleyh]

It would be easier if you provide a link to your page and then we can troubleshoot live in a browser with dev tools.