CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queries
RMurphy
RMurphy

Reputation: 21

Media Queries aren't working for smaller sizes

The elements on the page are only responding to the media queries with 1650px screen size and above. As a result, I can't make items responsive for mobile. Everything is good on desktop, but tablet and mobile screens are not responsive. Posting the code below. Is there an error somewhere? Here are my media queries:

 @media only screen and (max-width: 380px) {
    footer {
        margin-top: 50px;
    }
    .header-image {
        height: 50px;
    }
    #social-icons {
        display: flex;
    }
}
@media only screen and (max-width: 480px) {
    .header-image {
        height: 100px;
    }
    #social-icons {
        display: flex;
    }
    .custom-logo {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 600px) {
    footer {
        margin-bottom: 50px;
        text-align: center;
        margin: 0 auto;
    }
    #social-icons {
        display: flex;
    }
    .textwidget {
        display: flex;
        text-align: center;
    }
    .widget_text {
        margin-right: 60px;
    }
    .custom-logo {
        margin: 30px;
    }
}
@media only screen and (max-width: 768px) {
    .header-image {
        height: 100px;
    }
    .menu-toggle {
        display: none;
    }
    .custom-logo {
        width: 50%;
        margin-top: -20px;
    }
}
@media only screen and (max-width: 900px) {
    .main-navigation ul li a {
        font-size: 16px;
        display: none;
    }
    .custom-logo {
        width: 70%;
        position: relative;
    }
}
@media only screen and (max-width: 1100px) {
    .main-navigation ul {
        margin-top: -35px;
    }
    .custom-logo {
        width: 50%;
        margin-top: -20px;
        position: relative;
    }
}
@media only screen and (max-width: 1250px) {
    .custom-logo {
        margin-left: 30px;
    }
}
@media only screen and (max-width: 1400px) {
    .custom-logo {
        margin-top: 50px;
        width: 50%;
    }
}
@media only screen and (max-width: 1500px) {
    .custom-logo {
        margin-left: 100px;
    }
}
@media only screen and (max-width: 1650px) {
    .custom-logo {
        margin: 0px;
    }
}
@media only screen and (max-width: 1850px) {
    .custom-logo {
        width: 25%;
    }
}

Upvotes: 0

Views: 76

Answers (1)

dippas
dippas

Reputation: 60573

When using non-mobile first approach (max-width) you need to put the queries in order from the highest to the lowest (because CSS is cascading, so the latest rule will override the first one), but you have it backwards.

Upvotes: 4

Related Questions