I have the following layout using style elements:
Element.viewport stylesheet <|
[ width (percent 100) ]
[ el Header [ padding 10, width fill, center ]
( text "My Header Text")
[ row None
[ center ]
[ column Content
[ center, width (px 400), height content ]
[ el None  ( text "some content") ]
But all my elements are left aligned rather than centered on the viewport. How do I fix this?
Hello and welcome!
So, unfortunately I don’t have a direct answer for you. But! Here’s what I’d try.
If you’re not already on it, I’d definitely recommend getting on the elm slack, there’s a #style-elements channel where people frequently answer questions like this.
I’d also recommend creating an ellie(https://ellie-app.com/new) with your code when you share it. It’ll make it a ton easier for someone to see what’s actually going on, fiddle with it, and maybe return a fixed version to you.
I have an ellie here: https://ellie-app.com/V3YwpcY6a1/0
I will try the slack channel again. I’ve asked a few questions there and not gotten much response, probably because my questions are very basic function like this one. I also generally prefer troubleshooting venues that are indexed by search engines so that others can find answers easily later and prevent the same questions being asked repeatedly.
It looks like the problem is in
width (px 400), I think it should be
width (percent 100)
Check out https://ellie-app.com/7TPXtjcCHa1/0
Not quite as that just stretches it across the whole viewport. This ellie from the slack discussion was helpful: