Media Queries are not working. How do I solve this

user_12820903 0
Viewed 35

So I built a website resembling a template that I found. The website has two grids in it and I want to change the number of columns and rows with media queries to make the website responsive. However, the media queries just refuse to work properly. There are 2 problems: 1) It does what I want but not WHEN I want, 2) It doesn't do anything at all.

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

this, for example, will work, but the color changes only when the screen is at least 600px wide

  @media only screen and (max-width: 760px) {
  #grid {
      grid-template-columns: 1fr 1fr ;
      grid-template-rows: 2fr 2fr 2fr 2fr;
  }
 }

This one won't work at all. Please help, this is so frustrating, I feel dumb

responsive media grid css html
1 Answers

Since you're building upon an existing template you might have an issue with specificity.

Try to override it by putting !important at the end of the declarations which aren't working.

For example:

@media screen and (max-width:760px) {
   body{
        background-color: green !important;
       }
   }

A better way to do this is to use your browser's inspector to find the declaration which is overriding yours and then edit it (if you have access to that code). But the !important is a quick solution for now.

user_93075100
Related