I’m trying to layout my design in mobile view, but I’m having a hard time centering content within certain div-blocks and containers. I have layouts set to flex and aligned vertically etc, but I’m a little stumped. I know there is probably a magical combination of layout options I need to click in order to get them to align vertically, but I’m a little stuck. Any help would be greatly appreciated!
You could totally use Flexbox for this if you wanted, but in this specific case, you can fix this in just a couple steps! (If you wanted to use Flexbox though, add a div to your section, give it a class name, and apply Flex - Vertical to it!)
In this case, all I did was go to your Mobile - Portrait breakpoint, adjust the width of Section 2 to be 100% instead of the pixel width you had it at, and then click the icon in the upper-right corner of the spacing panel to center the items.
I changed your section width to 100% because that allows the section to be responsive on that breakpoint, regardless of the phone screen’s size, and the pixel value you had it at overflowed off the screen, as you can see by the line in the gray area of the designer. Setting it to 100% resolves this issue altogether. (Alternatively, you could leave your pixel value as-is and just set Max W to 100%.)
The icon I clicked sets the margin of the element to AUTO on both sides, which should automatically center the element for you.
Hope that helps! Feel free to write back with any questions you might have.
Ah Excellent! Thanks so much. I think not setting the width to 100% could have been an issue. I was wondering why my content was flowing off screen. Appreciate it:)
I’ve tried to apply this method of setting the strip to 100% the width and then centering the items on the next section below, but My items don’t seem to centering properly. I have a feeling that this is because they’re in a container which means they’re constrained to a fixed width, is this right? In this case, does this mean that containers don’t scale well for mobile and it’s better to simply put content in div-blocks?
So, personally, I avoid three elements in Webflow Designer and choose to recreate them myself:
Webflow’s Stock Navbar (I rebuild using divs and interactions)
Webflow’s Stock Containers (too limiting as I can’t control width)
Webflow’s Native Column Element (too limiting, IMO)
That’s 100% my personal opinion and I’m sure there are many that disagree, but I personally find it easier to rebuild those elements myself.
So, that’s what I did in the above video. (You could probably fix it without rebuilding these elements, but I think the easier route is to rebuild them really quickly.)
In the video, I replaced your container with a div and set the max-width to 1000px. I replaced your columns with 4 divs - a parent element to house the three columns, and the three columns itself. The three columns are just three divs that are equal in width (width = 33.33%), and I used Flexbox to space them how I wanted on each breakpoint.
Check out the video and let me know if there’s anything that doesn’t make sense, and I’d be happy to explain!
Note: there was one point in the video where I replaced two classes - Div Block 14 and Div Block 15 with the class of Div Block 13 - but this is actually not necessary. You can skip that step (2:17 to 2:29 in the video!)
Hi again! I was going to post on the main forum, but since you’ve been so helpful so far, I thought I’d reach and try you first:)
So I’ve taken your advice and created navbars out of Div blocks, rather than the default. Only thing is, I have a navbar that slides down when the page is scrolled beyond the main header image. For some reason, the navigation bar is sitting behind content on the main page, rather than on top. I’ve had a similar issue before and rectified it, but can’t seem to do so this time. I’m sure it’s an easy fix… If you do have any time to help out, here’s my share link again: https://preview.webflow.com/preview/tumnusbeta?utm_source=tumnusbeta&preview=52ebf0b8641551e48ac57b2f66be73ed&mode=preview
