Display two divs next to each others, then one under the others with two different SCSS files

Question

I have this HTML :

<div className="tab-header">
  <div className="container-header-comp">
    <div className="header-comp">some-text</div>
  </div>
  <div className="header-options">
    <div className="header-options-text">some-text</div>
  </div>
</div>

Pretty simple. I have two SCSS files, one for each of the two responsive designs of my app (page.scss and page-responsive.scss)

I want to display "container-header-comp" and "header-options" next to each other, so my page.scss looks like this (and works great) :

.tab-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Now, if I want to display the same classes, but instead of next to each other I want them one below the other for my responsive design. So in page-responsive.scss I simple did this :

.tab-header{
  grid-template-columns : 1fr;
}

Since it is in another file, that styling doesn't apply to my classes (Unless I apply !important which I don't want to do). How can I achieve this trick with my two scss files ?

Answer 1

try with

@media only screen and (max-width: 600px) {
{
    ....
   }
}