Page 1 of 1

Combining different widths in content

Posted: 29 Jan 2021, 10:53
by metallissimus
I'd like to have some parts of my content wider than others. I was successfull using a wide setting for the whole content, putting container divs around the part I want narrower and style them with custom CSS. Is there an easier way to do this? Can I somehow assign X3 classes (which I feel are a lot more refined than what I can achieve) to those container divs?

Re: Combining different widths in content

Posted: 29 Jan 2021, 23:24
by mjau-mjau
As you already figured out, you would first need to set the context width to wide (100%), which allows you to build your custom "grid" layout without having it limited by the context width (which in itself is based on a "grid" when not set to wide). From there on, you can use X3's grid, which is based on the Foundation framework:
https://get.foundation/sites/docs-v5/co ... /grid.html

Basically the grid allows you to control widths, use columns and decide how columns stack on smaller screens. Needless to say, this requires some patience to work with, as it's basically "web designer" stuff. I created the www.photo.gallery home page layout with a custom grid, and it did take a while. But the grid is definitely your best friend if you want to create and manage a custom layout!

Re: Combining different widths in content

Posted: 02 Feb 2021, 08:45
by metallissimus
Thank you, I think that's exactly what I need. Also the X3 home page will be useful to look at some code, there's some good examples of what I'd like to achieve.

Re: Combining different widths in content

Posted: 02 Feb 2021, 22:40
by mjau-mjau
I actually have the X3 home page content as a download (50MB) if you are interested:
www.photo.gallery/download/www.photo.gallery.25.sep.2018.zip

In addition to grids, there is a lot of custom CSS. It's not simple stuff!