CSS media queries height

Question

I just learned how to use CSS media queries to make my page fit the screen when the user re-sizes the window, or has a different screen resolution.

My page is designed so that the user won't have to scroll at all. I want to make my page to fit on 1280px by 768px and 1280px by 960px screen resolution. The problem is, the page gets all messed up when I have similar widths (1280px).

Could someone please assist me? I greatly appreciate your help!

Solution 1

Use a comma to specify two (or more) different rules:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
   ...
}

Solution 2

You can setup styles between specific dimmensions. For example, something like this:

@media(min-width:768px) and (max-width:979px){

<styles go here>

}

And then, anytime the viewport is between these two dimensions, your styles will adhere.

And I just realized how old this post is, but I'll go ahead and add it anyway in hopes it helps someone out.