PricingDocsAcademy
...
Wed, Jan 15, 1:28 PM
Log inSign up
Log inSign up
All topics

Max width for page?

  • /attachments/1316044778651254784/1316044778961637436/image.png

    ssssadsadasd

    1 month 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
    image.png

  • Tom Ireland

    1 month 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

    1 month 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.
  • /attachments/1316044778651254784/1316049992053555230/Screenshot_96.png

    Tom Ireland

    1 month 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.
    Screenshot_96.png
  • /attachments/1316044778651254784/1316053822292099072/image.png

    ssssadsadasd

    1 month 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
    image.png
  • @ssssadsadasd
    @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

    Tom Ireland

    1 month 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. ๐Ÿ‘

  • Lucas G

    1 month 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
  • /attachments/1316044778651254784/1316077651349344257/image.png

    ssssadsadasd

    1 month ago

    @Lucas G hmm I think it was not taking the whole screen.
    image.png
    image.png
  • @ssssadsadasd
    @Lucas G hmm I think it was not taking the whole screen.

    Lucas G

    1 month ago

    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

    1 month 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
  • /attachments/1316044778651254784/1316083678195220531/image.png

    ssssadsadasd

    1 month ago

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

  • Lucas G

    1 month ago

    How are the components positioned?
  • /attachments/1316044778651254784/1316085723794899004/image.png

    ssssadsadasd

    1 month ago

    this is the div which holds the sidebar
    image.png
  • /attachments/1316044778651254784/1316086566946340954/image.png

    ssssadsadasd

    1 month ago

    and the sidebar itself. I think it is related to this.
    image.png

  • Tom Ireland

    1 month 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.
  • /attachments/1316044778651254784/1316093461010710618/image.png

    ssssadsadasd

    1 month ago

    @Tom Ireland hmm I dont think it is working as expected
    image.png

  • ssssadsadasd

    1 month 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
  • @ssssadsadasd
    @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

    Lucas G

    1 month 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
  • /attachments/1316044778651254784/1316134660841148446/image.png

    ssssadsadasd

    1 month ago

    @Lucas G I am not sure implemented it correctly, but it does not solve the problem ๐Ÿ˜•
    image.png
    image.png
    image.png

  • Lucas G

    1 month ago

    I'd update a few things on that. It's hard to fully troubleshoot it without taking a look though

  • ssssadsadasd

    1 month 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
  • @ssssadsadasd
    @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

    Lucas G

    1 month ago

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

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Mรธller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

ยฉ Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle