Putting Antimatter into a fixed-width container

Archive
1

Hi,
I like the Antimatter styling but changing anything around is a bit tricky for a newbie as the css is quite bespoke.

Is there an easy way of putting the content into a fixed width container?

It would be quite nice if the navbar could stay wide, but that’s not vital.
Many thanks,
Luke

2

I can give you some pointers, but it will require recompiling the SCSS or using custom.css:

body #sb-site {
  position: initial;   // reset this
  max-width: 600px;    // your fixed width
  margin: 0 auto;      // center it
}

body #header {
  left: 0;             // reset the header to the left
}

Might not be perfect, just tried it in the inspector, but should get you a bit closer to what your looking for.

3

Hi Rhuk
That works very nicely :slight_smile:
Many thanks
Luke

4

Hi there,

I tried the code above and added it to custom.css, but it nothing changes. I cleared the cache but the content is still in full width. Did something change in the way custom.css does handle things? Thanks a million for your help!

5

@justin Case
it depends on the order of specificity of your custom.css.
If not specific enough, then your modifications are overxwritten.
That’s called ‘cascading styles sheet’ system.
The more specific you are, the more your specifications are taken into count.

[See also link (recompiling the SCSS)[http://learn.getgrav.org/themes/customization#custom-scssless] from @rhukster]