Media queries don't work at all
I'm desperate. I am trying to build a website and make it mobile and responsive, however, I can't seem to get any media query to work at all! All my sizes, widths and heights are in "% / em" and my font sizes are in "vw / em". The biggest problem I get is that when the screen shrinks, my text also gets to the point where it just becomes stressful to read! I don't see the need to submit any code, but I will post some of my code if necessary (my website is still down and I cannot post unless this problem is fixed).
Here's what I've tried:
I tried to put this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Fails when I try the media query in a tab or in a separate CSS stylesheet.
I tried to remove it as well.
I've 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've also tried other media queries, but absolutely NOTHING, no changes at all! Am I doing something wrong? Probably, but what ?! This leads to a lot of problems! I cannot change my title to fit different screen sizes, I cannot change my screen, my link titles are messy, etc.
Also note that I am a beginner and I am not using javascript, bootstrap, etc.
Thank you in advance for your help!
source to share
Your requests are a little strange. Perhaps with some logical constraints, 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 spacing using both min-width
and max-width
helps me visualize what's going on better. This pen shows that the colors change whenever you change the width. This isn't great, but it's a good place to start with media queries.
EDIT:
The pen contains transitions between colors because cool
source to share
It is usually best to use media queries based on minimum screen width. Here's a 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%;}
}
source to share