Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

How do I reduce the sidebar width on Quark theme?

Started by Jose 2 years ago · 1 replies · 86 views

2 years ago

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.

I found

CSS

.col-9 {
  width: 75%;
}

Deals with the width of the summaries section for desktop screens

and this for the sidebar width

CSS

.col-3 {
  width: 25%;
}

One single column for mobiles:

CSS

.col-12 {
  width: 100%;
}

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.
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?
imagen|433x204
Reduced, forced on browser.

Thanks and regards
joejac

last edited 12/17/24 by Jose

2 years ago Solution

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

CSS

.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. :christmas_tree:
Best regards.
joejac

Topic	Replies	Views	Activity
Multisite in subdirectory Support · by Thomas, 1 week ago	2	53	10 hours ago
How to listen for GET requests instead of POST requests? Support · by Anna, 3 days ago	2	60	13 hours ago
Twig not processing in 2.0.0 Support · by Justin Young, 14 hours ago	1	30	14 hours ago
Form: GRAV.Yes translation key Support · by Duc , 1 week ago	2	65	5 days ago
Installing Grav on Windows 11 Support · by Colin Hume, 1 week ago	2	56	5 days ago

Suggested topics