A valid question, and probably one I should have answered earlier.
I just want the “panel” to resize responsively as the page resizes. It seems to work – at least in Safari responsive design mode. The left and right margins shrink as it gets closer to mobile size, which is what I want.
I know that I’m probably overthinking this, but it seems too simple to be the correct approach, and so I was wondering if anyone sees a problem with it.
@steveb - I realized that my last message sounded like “thanks - end of issue” – not my intent. I’d still like your feedback if any. Or failing that, a pointer to a section of Skyline that addresses this issue :)
Thanks. To close this on a positive note, I’d like to say that studying the @TemplateRepo stuff is helping me make…well, not great strides, but pretty large strides for someone who was still doing layout with tables more recently than I’d care to admit.
Fact is that there are many ways of doing it, but I wouldn’t recommend using the Flex stack this way: more on Flex stack below. In your case I would use a Section then your Heading and Text inside a Container: this way you’ll have equal vertical paddings and horizontal margins making your content look nice and centered.
Instead of a Section you can also use the Background, or use the Section into a Background, depending on the layout you wish to achieve.
About Flex: Flex is to be used with other inline stacks like Base, Card, Image, Utility etc. You can still make a block element into inline by using the Utility: place a Heading into a Utility stack and the Text into another Utility stack, then both into the Flex stack. You’ll see that both are horizontally aligned. Now go to the Flex settings and set the vertical alignment to middle to get both aligned to the middle. Flex is one of these stacks that is fun to use and you can get great results, just remember the inline principle.
If I go to an iPhone setting, I get this - a full width container (the gray borders are actually around the “iPhone” view in Safari):
Using the Section/Container approach I can set the section to a fill mode of “flexible” with a width of 60%, and that works for the desktop and large sizes, but retains the margins at mobile size, like so:
It’s possible there is a way to do what I want using the Section, but I don’t seem to be able to do it.
Why are you setting the 60% thing? Doing that will make things appear as you have it, in your pictures. You’ve set the container to span 60%, so that’s what it’s doing, regardless of screen size.
But, not sure why you’ve selected it and set to 60% in the first place? There’s no reason to do so that I can see. If you want to limit the width of the container, set it to small, large, default, etc. in settings.
If you want the container to span 60% on desktop and say 95% on mobile, you will either need to build two elements and use the visibility stack to define which one is in view, or use some CSS change the span width based on screen width.
The problem is just where your background colour is. The contained width is where the text is. If you have used the stacks default background settings then this will apply the background to that stacks wrapper divs which are 100% wide.
No, the stacks divs around the container are 100% width. Those background and border settings are the Stacks built in ones - they only affect the stacks wrapper divs outside whatever stack code is in there.
The vulgar way is to just put another stack inside and add the background and borders to that, this will be inside the actual container max-width and so be constrained in width. I say vulgar as it is adding another 3 or 4 divs.
There are many ways to skin this cat depending on how you want to do it from totally CSS, using a single stack with that functionality and no stacks wrapper divs to the above “drop more in” method. I will let others advise you on which to do as I am biased (not that it would stop other developers :) )
The stack inside a stack (in the case of UIkit, a container inside a container) is vulgar, but it’s an approach I do a lot. Yes, it’s dirty, but it works, and no hardm with a bit of dirt every now and then ;-)
Typically though I find that with Uikit you don’t need to resort to such vulgar dirty solutions ;-)
Mock me up exactly what you need, and I’ll make something up for you.