How to centre content in Quark

Hi all

I'm using Quark and I wanted to ask for a normal page, how can I center the content but have the text left-justified. The problem is when I view the site on a widescreen, it looks add have the text all the away off to the left while the menu and centered heading items are centered?

How can I get it to behave like this form, centered along the navigation but left-justified.

You can do it with CSS or you can change the grid size inside Quark's Theme Settings (Themes -> Quark).

Change Grid Size to Medium

@Starguest, thanks very much, do you know which file it is in particular?

.container.grid-xl {
max-width:1296px
}
.container.grid-lg {
max-width:976px
}
.container.grid-md {
max-width:856px
}
.container.grid-sm {
max-width:616px
}
.container.grid-xs {
max-width:496px
}

you can change these values in your custom.css or use the drop down menu inside of the theme settings (admin panel -> themes -> quark).

@Starguest thanks again.

I don't see an option in the admin section to change anything on the theme. Also I'm not sure how the above is chosen? Is it based on the screen width, ie bigger screen use different containers?

@daredevil, Quark uses the grid system from Spectre. The content of the site is contained in a container. The container itself is centered in the screen.

If the grid size is not set or not set properly, it will cause the container (and hence your site) to be full screen. That's like the picture you've provided.

The width chosen for the grid is a design choice. It's about aesthetics and legibility.

The width of the container can be configured using a theme variable. There are several widths you can choose from: grid-xl, grid-lg, grid-md, grid-sm, and grid-xs.

The width of the grid can be set in the config file for Quark (/user/config/themes/quark.yaml), or via Admin.

Admin:
In the config section of theme Quark, you'll have to look for 'Grid size' and you can only choose for 'Extra Large' (grid-xl), 'Large' (grid-lg), and 'Medium' (grid-md).

quark.yaml
Copy file '/user/themes/quark/quark.yaml' to folder '/user/config/themes'. In the copied file you can set the grid-size as follows:

grid-size: grid-lg # Or one of the other options shown above.

Hope this helps!

@pamtbaau thanks very much, makes sense. I'll get right to it.

One last question - would I follow the same steps if my theme is inherited? Right now there are no options in the admin section for grid size, the option is there for the quark theme but when I change it, it doesn't change on my theme?

@daredevil, When inheriting a theme, you should copy the form section of the blueprints.yaml from Quark into your own theme's blueprints.yaml. Then all Quark settings will be available in Admin for your own theme.

See Theme Inheritance

• See step 4 from section Inheriting using the CLI
• See step 3 from section Inheriting manually

I see, thanks very much.