Media Queries Conflict

[dave8794]

Hi, the media query I used for mobile formatting of my site is max-width: 650px.

Example:

@media screen and (max-width: 650px){
.processex {
padding-left: 5%;
padding-right: 5%;
font-size: 1.2em;
}
}

I have been working on adjusting my site to accommodate large viewports with a height of 768 because my vertical spacing is scrunched on those resolutions. Example code to fix certain areas is:

@media screen and (max-height: 768px) {
.timeex2 {
padding: 1% 15% 0 15%;
font-size:1.3em;
}
}

So to the problem. Since I have added the media queries for max-height: 768px, it has messed up some of my mobile formatting that was accomplished with the max-width: 650px. The formatting for 768 works on desktop fine, but the mobile formatting has incorporated the lines of code from the 768 formatting into the 650 formatting. Is the 768 height affecting moble because I did not specify a height in my mobile media query and/or a width for the large screen?

[SamA74]

@dave8794

@media screen and (max-height: 768px) { }

This query will affect screens with a height less than 768px, which are likely to be mobile screens.
Is that what you wanted, or did you want these rules to apply only to larger screens?
To target screens with a height more than 768px, use this:-

@media screen and (min-height: 768px) { }

[dave8794]

That was it, I needed min instead of max. Silly mistake. Thank you so much!

[PaulOB]

@dave8794

padding: 1% 15% 0 15%;

As an aside note that vertical percentage padding is based on the width of the containing block and not on the height of the element and is generally not a good approach as that 1% will depend on the width of the element concerned. I generally stick to px for vertical padding as it gives a more pleasing layout and can be controlled more easily with media queries.

[dave8794]

PaulOB, thank you for taking the time to point that out. It makes perfect sense. Ill change the verticals to px. I assume same case for vertical margins?

[PaulOB]

@dave8794

I assume same case for vertical margins?

Yes percentage margins and padding are based on the width of the containing block unlike the top or bottom properties for positioned elements which are based on the height of the containing block.

[dave8794]

Perfect, thank you again!