CODEWITHSUNDEEP
css
Tom Turrisi
Tom Turrisi

Reputation: 1

I was told I can't use max-width and have to use min-width in css

This is with @media screen and (max-width:700px) {

https://i.gyazo.com/eab7c69146b5d47f3ce9adefae6e712d.png

When I do @media screen and (min-width:700px) { It gets screwed up. How do I change it to min-width without it messing up?

https://gyazo.com/3c27f20efe29a4cf001bf531dac59405.png

Upvotes: 0

Views: 53

Answers (2)

Leon Vuković
Leon Vuković

Reputation: 489

You can use both min-widht and max-width and also combine them if you want.

min-width example:

@media screen and (min-width: 576px) {
  body {
    background-color: lightgreen;
  }
}

max-width example:

@media screen and (max-width: 767.98px) {
  body {
    background-color: lightgreen;
  }
}

min-width and max-width combination example:

@media (min-width: 576px) and (max-width: 767.98px) {
  body {
    background-color: lightgreen;
  }
}

Note that I used 767.98px for the max-width because the next media rule would be for example @media (min-width: 768px) and (max-width: 991.98px) {}.

Read more about media rules here. You can also view how media rules are used in bootstrap here.

Upvotes: 0

Avnoor Singh Bal
Avnoor Singh Bal

Reputation: 77

Use this code

@media only screen and (min-width: 700px) {

}

this will surly help you

Upvotes: 1

Related Questions