CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Solar Confinement
Solar Confinement

Reputation: 2289

css media queries correct sizes

Im developing a site using media queries. the ones that im using are this ones:

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

the problem that i have is that there are certain screen resolutions in laptops that made the screen look like this: enter image description here

As you can see. The navigation section overlaps the main logo and the letters and the bottom go over the main navigation menu. This happens basically on laptops screens that have a very big width and small height. Is there any way that i can target this resolution with media queries?

Upvotes: 0

Views: 1280

Answers (1)

brouxhaha
brouxhaha

Reputation: 4093

You have this: 

@media screen and (min-width: 1300px){
@media screen and (min-width: 1024px) and (max-width: 1299px){
@media screen and (min-width: 980px) and (max-width: 1199px){
@media screen and (min-width: 768px) and (max-width: 979px){

You can do something like this in addition:

@media screen and (min-width: 800px) and (max-width: 900px) {

And just put the elements you need to target inside the media-query. You can have as many media-queries as you'd like and target only the elements you need to.

It may be too late now, but I would recommend using min-width only in the future for most of your media-queries so you aren't reproducing some of the same code.

Upvotes: 0

Related Questions