I want my page to not exceed 1200px and be located at the center. so in the main div of the page I set: max width = 1200 px and layout = align top center. but the div still remain at the left. how could I solve this? thanks
Tom Ireland
4 months ago
You'll need to apply that to a child of the root div I think. The root div will always be the viewport size, so best to set that at flex and then center a child div inside with your max-width parameters. 👍
Tom Ireland
4 months ago
Actually, I might be mistaken. I think for the root, you could apply position or margin to center but your background will assume the browser default background colour I think.
Tom Ireland
4 months ago
You can use margin: 0 auto on the root to achieve what you want but the background will default to what toddle sets and that is white (see below). I'd opt for child element and use flex to center it instead.
ssssadsadasd
4 months ago
@Tom Ireland thanks. you mean 0 on all margins (see pic)? I am using the 2nd version since I have some reusables and they dont seem to behave well when I implement your first solution
You can see the blue outline around the entire preview
You don't need left/right settings here either. 100% width is enough
Lucas G
4 months ago
Ah sorry, I see what you are trying to do. I thought you were talking about children divs. Tom had already answered it
Margin or align-self: center would do it
I would use align-self
ssssadsadasd
4 months ago
@Lucas G thanks the align-self works. the only thing is that the components used do not move accordingly
Lucas G
4 months ago
How are the components positioned?
ssssadsadasd
4 months ago
this is the div which holds the sidebar
ssssadsadasd
4 months ago
and the sidebar itself. I think it is related to this.
Tom Ireland
4 months ago
The sidebar is set to Fixed at 0px, which means it will break out of the flow. I would use Absolute and set top and left to 0px as one way to fix that.
ssssadsadasd
4 months ago
@Tom Ireland hmm I dont think it is working as expected
ssssadsadasd
4 months ago
@Tom Ireland@Lucas G so yeah. the align-self only aligns the elements on the page and not the components. I tried to make the sidebar flex but it changed nothing
Position fixed is relative to the viewport, not its parent element
So to position the sidebar, make it absolute instead
display: flex is a different property from position property
ssssadsadasd
4 months ago
@Lucas G I am not sure implemented it correctly, but it does not solve the problem 😕
Lucas G
4 months ago
I'd update a few things on that. It's hard to fully troubleshoot it without taking a look though
ssssadsadasd
4 months ago
@Lucas G I have kept a very similar structure to the "dashy" template (i.e. sidebar component and a nav component that contains the sidebar component) except some custom changes. also are you part of the toddle team? asking because I could dm you the link to my app if that is fine. thanks
.jpeg/public)