• 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.