0

I am trying to move the media queries in my css file to a separate css file and then import it in the first file

File 1 : main css file

@import url("mediaqueries.css");

.main-nav{
  height: 40px;
  position: fixed;
  display: flex;
  width: 100%;
  background-color: rgb(80, 80, 80);
  align-items: center;
  z-index: 1000;
}

File 2: mediaqueries.css

@media only screen and (max-width: 790px) {
  
.main-nav {
        display: none;
        background: red;
  }    
}

But when I do this. Once the media is triggered, its CSS properties are getting overridden by the original. (See below screenshot, display:none is getting overridden)

Screenshot showing overriding issue

I tried moving the import to the end of the file. But then the media query is not getting triggered at all.

What is the correct approach to move your media queries to another css file and then import it in your first css file?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
anandhu
  • 686
  • 2
  • 13
  • 40
  • 1
    Try to have a look at this [link](https://stackoverflow.com/questions/7641082/how-do-i-get-my-import-stylesheet-to-override-the-main-stylesheet) KR – Rahm6 Dec 23 '21 at 14:26
  • I would reconsider structuring that way in the first place. It's not really a helpful strategy in most cases. There are better ways to break down CSS if your file sizes are unwieldy. – isherwood Dec 23 '21 at 15:36
  • The answer to your question, though. is that you did it correctly. It's just that the imported styles are overridden due to load order. So the question you asked isn't really the one you need answered. – isherwood Dec 23 '21 at 15:37

0 Answers0