Floating body question [solved]

This is one of those stupid second-guessing things, but…

I want to have a floating “body” in the middle of the page, like so

The quickest way I’ve found to do this is this:

04%20AM

Outside of this approach, how would one go about this? I know this is a vague question, but I’m a total newby at uikit, and I’m trying to learn more than one way of doing things.

Thanks.

What do you want the element to do? Stay in view, scroll with the page? Stay the same width as the screen size changes? Retain a percentage width of the screen? Etc.

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.

Thanks for the response.

@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 :)

Hi, sorry, forgot yo reply earlier. I’d say if it’s doing what you want, it’s fine. You’ve certainly not overdone anything and kept it simple. So all good I’d say.

Thanks. To close this on a positive note, I’d like to say that studying the @UiKitter 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.

2 Likes

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.

Also there’re plenty of examples on the Tests project using the Flex stack here, you can copy and experiment: https://uikitstacks.com/projects/tests/flex/

Thanks, @Lucas. One of the things I can’t get the section to do, though:

One of the effects of using the Flex is that as the browser shrinks, the margins around the container seem to shrink – until when you get to mobile size, there are no margins.

In Safari responsive mode, using the Flex/Container:

If I use the iPad mini 7.9" setting, I get this:

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):

14%20AM

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:

07%20AM

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.

Thanks,

Doug

Do you want to have left and right margins on mobile, or do you want the container to span full width on mobile? I can’t work out which you want!

Yes, I sometimes have the problem that I strive for clarity, but end up making things foggier. Sorry about that.

I want to have full width on mobile.

Going the Section/Container route should get you close. All you will have is a small left right margin, put there by the Container. Not sure why you are getting large margins.

Give me a mo, I’ll try it out.

EDIT: Just publishing a big site, gonna take a bit.

Yep, working as expected for me…

56

I added in the BG stack to give it a bit of color. Is that what you are trying to do?

Hold on, just realised…

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.

Or, use @tav BluePrint stack, which allows all this to be done in settings. https://www.bigwhiteduck.com/stacks/blueprint/

If I use the Container inside Flex, 60% width is about what it gets. I was doing that to show the only way I could get the effect I wanted in one environment. Once again, I was not being clear – :(

You are talking about this part of the settings?

23%20AM

I do set the size there, and I still get the container and section spanning the full browser width. Do you mean some other setting besides the Container or Section settings?

In the screenshot below, the Section is in white and the container is in grey with a black border.

I will investigate this further before answering again, and hopefully I will be able to be more clearlier in my answers. I will also look at the BWD Blueprint.

Thanks for your time.

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.

I see what you’re saying; playing around with the settings confirms this. Drawing a border around the Container also confirms that the container is at %100 width.

And I think I can explain exactly what I want: a bordered area with margins dependent on the viewport size. I’m just unsure how to get it.

Thanks for your time.

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.

I don’t mind if you don’t let it stop you. :) Seriously, your advice is welcome.

I believe I’ve found the answer, and it’s just to use css

@media (max-width: nn) {
   .myclass {
      margin-left: NNpx;
   and etc.

with the margins I want for the various platforms. This will take a tiny bit of work on my part, but I think it’s the best solution I’ve found so far.

1 Like

I would use a max-width for each breakpoint and then padding if you want it away from the edges.

Don’t forget shorthand can be used

padding: 0 24px means 0 top and bottom and 24px left and right