Media Queries messing up the site

Asked

Viewed 25 times

1

Guys, next.

I already own 4 CSS that make the necessary adjustments on my website. (unfortunately I started from biggest to smallest since I didn’t know it was good to have started from mobile).

My website will need:

  • A css that appears from from 1200px to any screen larger than this;
  • A css that appears down below from 1200px to 1024px (I will go down)
  • A css that appears down below from 1024px to 883px.

And now I’m creating a new css, which I will use below this 883px. However, when I put this code in my css, a smaller css comes together with a larger css and the two stay on the page, messing everything up. How do I use 1 css at a time in each area I specify? 

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 883px)" href="css/minsmall.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1023px)" href="css/small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="css/medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1200px)" href="css/large.css">

Another question: In an example I saw that the guy used on media=" screen and [...] instead of only screen [...], what’s the difference of using only or leaving without only? "

html css

  • From what I understand, the browser can interpret for example that the maximum size of up to 1024 px has 3 css that could be used. Can’t you put a min-width before max? So would more precise ranges...

  • so I don’t know how it would look, I could make an example of some of the code of how it would look?

  • I answered below to make it easier

1 answer

1


Executes the code below and changes the resolution of your page (You can change the width of the window)

Note: It may not work here in the stack. Copy and put in the file on your machine. Just test...

#btn{
background: #FF0000;
}

@media all and (min-width: 400px) and (max-width: 600px){
  #btn{
    background: #00FF00;
  }
}


@media all and (min-width: 600px) and (max-width: 800px){
  #btn{
    background: #0000FF;
  }
}
<button id="btn">Teste</button>

  • in this case, you are using the change in a single css, which is usually for small changes, in mine it is necessary to change the whole css pq has some major modifications, and I already have each css ready.. I’m just having a hard time configuring this code that I put in the html "<link rel="stylesheet" type="text/css" media="only screen and (max-width: 883px)" href="css/minsmall.css">"

  • Here’s how: "<link rel="stylesheet" type="text/css" media="only screen and (min-width: 400px) and (max-width: 883px)" href="css/minsmall.css">"

  • 1

    Hey, it worked! Thank you very much. If you can update your answer, with this code you commented, just to be sure the answer of the question to other people.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.