Max width for page?

  • ssssadsadasd-1316044778651254784

    ssssadsadasd

    4 months ago

    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
    1316044778961637436-image.png
  • tomthebigtree-1316048766502965319

    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. 👍
  • tomthebigtree-1316049216111513662

    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.
  • tomthebigtree-1316049992267337851

    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.
    1316049992053555230-Screenshot_96.png
  • ssssadsadasd-1316053822581243977

    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
    1316053822292099072-image.png
  • tomthebigtree-1316070479643279391

    Tom Ireland

    4 months ago

    I don't think margin: 0 auto is possible to set via the UI options. I'd just add that one line to the CSS panel for the div. 👍
  • lucasg-1316072643690233866

    Lucas G

    4 months ago

    Shouldn’t need to use margin here
  • In your first screenshot the div was not to the left, it was taking up the whole screen
  • ssssadsadasd-1316077652129349712

    ssssadsadasd

    4 months ago

    @Lucas G hmm I think it was not taking the whole screen.
    1316077651349344257-image.png
    1316077651919896756-image.png
  • lucasg-1316078275566501888

    Lucas G

    4 months ago

    You can see the blue outline around the entire preview
  • You don't need left/right settings here either. 100% width is enough
  • lucasg-1316078927646818304

    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-1316083678446882826

    ssssadsadasd

    4 months ago

    @Lucas G thanks the align-self works. the only thing is that the components used do not move accordingly
    1316083678195220531-image.png
  • lucasg-1316084917490417816

    Lucas G

    4 months ago

    How are the components positioned?
  • ssssadsadasd-1316085724218658848

    ssssadsadasd

    4 months ago

    this is the div which holds the sidebar
    1316085723794899004-image.png
  • ssssadsadasd-1316086567273631744

    ssssadsadasd

    4 months ago

    and the sidebar itself. I think it is related to this.
    1316086566946340954-image.png
  • tomthebigtree-1316087650029011065

    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-1316093461258043494

    ssssadsadasd

    4 months ago

    @Tom Ireland hmm I dont think it is working as expected
    1316093461010710618-image.png
  • ssssadsadasd-1316107850560442388

    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
  • lucasg-1316109813238988881

    Lucas G

    4 months ago

    align-self is for the element to align itself
  • Hence the name of the property
  • Align-items: center is for its children elements
  • What Tom said was correct
  • 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-1316134661918949399

    ssssadsadasd

    4 months ago

    @Lucas G I am not sure implemented it correctly, but it does not solve the problem 😕
    1316134660841148446-image.png
    1316134661218500779-image.png
    1316134661650649209-image.png
  • lucasg-1316135599408807947

    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-1316140061774975006

    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
  • lucasg-1316144671759667211

    Lucas G

    4 months ago

    I am not part of the toddle team, no
  • You can DM it if you want, people oftentimes do