Media query help

So i’m trying to create media queries that expand my main section of content when the screen gets smaller. My problem is that when i apply the media queries, it then erases all of my styling. Here is my html and Css. How do I fix the media queries so that they create a responsive layout without erasing all of my styling?

html


css

Hey @paine8887,

I didnt check all the code but here are two things I noticed straight away.
You put your media queries in front of your default attributes. I suggest always putting them at the rear because CSS is loaded in and implemented top to bottom.

Also (this might actually be the cause of it not working), this query is not closed off:

@media all and (min-width: 500px;) {

.main-div {
  width: 85%;
  margin: 100px auto;
}

Hope this helps ;).

4 Likes