user3144924 user3144924 - 2 months ago 12
CSS Question

My media queries is not working properly especially of landscape

I am working on media queries for one Header, but the media queries is not working. If I fix the media query for one device correctly then it is not working on my device.
Here is my code...

@media (max-width: 499px) {
.mission h1 {
font-size: 10px;
margin-right: 550px;
margin-top: -15px;
margin-bottom: 0px;
}
.mission h2 {
font-size: 10px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 6px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 5px;
margin-right: 540px;
line-height: 10px;
}
}
@media (min-width: 610px) {
.mission h1 {
font-size: 16px;
margin-right: 550px;
margin-top: -15px;
margin-bottom: 0px;
}
.mission h2 {
font-size: 16px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 10px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 7.5px;
margin-right: 540px;
line-height: 10px;
}
}
@media (min-width: 700px) {
.mission h1 {
font-size: 18px;
margin-right: 550px;
margin-top: 50px;
margin-bottom: 0px;
}
.mission h2 {
font-size: 18px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
}
@media (min-width: 700px) and (orientation: landscape) {
.mission h1 {
font-size: 18px;
margin-right: 550px;
margin-top: 50px;
margin-bottom: 0px;
}
.mission h2 {
font-size: 18px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
}
@media tv and (min-width: 700px) and (orientation: landscape) {
.mission h1 {
font-size: 18px;
margin-right: 550px;
margin-top: 50px;
margin-bottom: 0px;
}
.mission h2 {
font-size: 18px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
}
@media (max-width: 860px) {
.mission h1 {
font-size: 18px;
margin-right: 550px;
margin-top: -20px;
;
margin-bottom: 0px;
}
.mission h2 {
font-size: 16px;
margin-right: 550px;
margin-bottom: 0px;
}
#p1 {
font-size: 12px;
margin-right: 540px;
line-height: 10px;
}
#p2 {
font-size: 8px;
margin-right: 540px;
line-height: 10px;
}
}


The above code that I tried solved my problem a little bit, because it is not responding exactly what I want.
My website is live and it can be sacked online by using the link.
http://www.ericsbo.se/
I normally check my website for responsiveness by this website website online. If any one check that can find some bugs. The online checking website can be find here http://www.isresponsive.com/

Answer

Okay, so I have done some testing and I know why it is doing it because max-width means, "If the [width] is less than or equal to [max-width] return true".

Knowing this we read the query like this:

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

So in this case both will return true and I believe in CSS the latter code will have greater priority and will overrule the previous code. So, you can switch this and accomplish it with min-width, set boundaries (what I suggested in comments) or I believe if you put the min-width:499px logical statement AFTER the min-width:800px logical statement it should work.

EDIT: For landscape, I guess the best way that I can think about (I haven't done this in a while) would be to assign the logical statement to everyone you don't want to run while it is in landscape mode and not (orientation: landscape) so it won't be trigger. Probably a better way, but you have to do some research. Here is a nice page with some good information. CSS Tricks