How do I reduce the sidebar width on Quark theme?

[joejac]

Hello to all,
How do I reduce the sidebar width on Quark theme?
Hello, sorry if this is trivial, I do not like using frameworks for CSS I want to keep styles simple.

1. I found

.col-9 {
  width: 75%;
}

Deals with the width of the summaries section for desktop screens

2. and this for the sidebar width

.col-3 {
  width: 25%;
}

3. One single column for mobiles:

.col-12 {
  width: 100%;
}

4. If I edit widgets.css directly and I reduce the sidebar, .col-3, to 20% and increase the summaries, col-9, to 80% in the same amount, it works on the browser inspector.

5. Then I make the changes in my inherited theme in the custom.css file, but I see Spectre changing back to the original values no matter what I try to bypass in custom.css.
   

   

Question: How can I make these changes permanent using my quarkCustom theme?

Reduced, forced on browser.

Thanks and regards
joejac

[joejac]

Hello
My error was in the media query
The following CSS in my custom.css file worked fine :

.bricklayer-column-sizer {
    width: 100%;
    display: none;
}

@media screen and (min-width: 640px) {
    .bricklayer-column-sizer {
        width: 100%;
    }
 .col-12 {
    width: 100%;
  }
}

@media screen and (min-width: 980px) {
    .bricklayer-column-sizer {
        width: 50%;
    }
 .col-12 {
    width: 100%;
  }
}

@media screen and (min-width: 1200px) {
	.bricklayer-column-sizer {
    width: 33.33333%;
    display: none;
	}

 .col-3 {
    width: 20%;
  }

  .col-9 {
    width: 80%;
  }

}

@media screen and (max-width: 1199px) {
 .col-12 {
    width: 100%;
  }
}

I wish you all a very nice holiday season.
Best regards.
joejac