CODEWITHSUNDEEP
htmlcssmedia
00 00
00 00

Reputation: 55

Media Queries not working at all whatsoever

I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).

Here's what I have tried:

I have tried putting this in my tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

No success when I try media query in a tab or in a separate css stylesheet.

I have tried removing it aswell.

I have tried these media queries for my font-sizes:

@media (max-width: 400px) {
    body { font-size: 60%;}
}

@media only screen and (max-device-width: 800px) {
    body { 
        font-size: 80%;
        background-color: blue;  
    }

}

@media (max-width: 1100px) {
    body { font-size: 120%;}
}

I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.

Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.

Thank you in advance for your help!

Upvotes: 3

Views: 1508

Answers (2)

Caio Felipe Pereira
Caio Felipe Pereira

Reputation: 835

Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:

@media (max-width: 400px) {
    body{
        background-color: yellow;
    }
}

@media (min-width: 401px) and (max-width: 800px){
    body { 
        background-color: blue;  
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    body { 
        background-color: purple;
    }
}

@media (min-width: 1101px){
    body{
        background-color: orange;
    }
}

In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.

EDIT:

Pen contains transitions between colors because cool

Upvotes: 1

ollierexx
ollierexx

Reputation: 509

Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:

Codepen: http://codepen.io/anon/pen/eNJXXp

@media (max-width: 400px) {
    p { font-size: 60%;}
}

@media (min-width: 400px) {
    p { 
        font-size: 80%;
        background-color: blue;  
    }

}

@media (min-width: 800px) {
    p { font-size: 120%;}
}

Upvotes: 1

Related Questions