Picture of Cormac O'Keeffe
Component - full page width
by Cormac O'Keeffe - Thursday, 20 January 2022, 2:24 PM
 

Hi,

I've been looking through the forum and experimenting in the framework, but I can't see to find how I can make a component span the full width of the page. At the moment, it's positioned in the center whereas I'd like it to be almost flush with the left-hand side of the page. Can anyone tell me which less file I need to modify?

Thanks!

Cormac

Picture of Chuck Lorenz
Re: Component - full page width
by Chuck Lorenz - Thursday, 20 January 2022, 5:08 PM
 

The Vanilla theme comes with some extra classes, mostly found in less/project/theme-extras.less. Experiment with adding "extend-content-container" and/or "extend-container" to the block. See if that moves you in the desired direction.

Picture of Chuck Lorenz
Re: Component - full page width
by Chuck Lorenz - Thursday, 20 January 2022, 5:23 PM
 

Adapt's layout uses a series of nested containers, typically "wrapper", "page", "article", and "block" (and frequently an associated "__inner" container, too). Ensure that the component's parent containers are not restricting its expansion. In the image below you can see the orange margins of "block__inner". They result from a "max-width" that has been applied to "block__inner". It is this that restricts the component from expanding. (At least in most themes based on Vanilla.)

Picture of Cormac O'Keeffe
Re: Component - full page width
by Cormac O'Keeffe - Thursday, 20 January 2022, 6:08 PM
 

Thanks for the rapid reply Chuck - I'll try that tonight!