Streaming live at 10am (PST)

Help formatting columns for mobile portrait

Hello!

I have just added two column sets to a webpage (each set has 4 columns each). The section is automatically formatted for desktop, tablet, and mobile landscape. It is not automatically formatted in mobile portrait.

How can I format it so it fits the screen correctly? In order to have the images and link text in each column be readable and not microscopic, I think I will need to have 4 sets with 2 columns each (instead of the 2 sets with 4 columns each). Is this possible to do?

Alternatively, would a grid be better suited for this? If so, how do I add more than one design element to each grid square? (Photo, link text).

Here is my sharing link- my issue is with the “Interested in learning more?” section: https://preview.webflow.com/preview/bluecart?utm_source=bluecart&preview=39b6c3b9afd2e6a52286dd56da0b6eb3&mode=preview&pageId=5cdb325b35ab18b99deb72a7

Thank you!

Hi @riannag, how are you this evening?

I started out with your column issue and then added some other fixes. Hope this helps with you in your designs in the future as well.

Sorry I went off on a tangent.

Thank you, Brandon! We’ve had a few different hands on our website, and both developers and those of us who are completely new to Webflow (me).

I followed your steps to create the grids, but I can’t for the life of me figure out why my grids are so much larger than yours. Would you mind taking another look? I thought I followed your steps exactly…

https://preview.webflow.com/preview/bluecart?utm_source=bluecart&preview=39b6c3b9afd2e6a52286dd56da0b6eb3&mode=preview&pageId=5cdb325b35ab18b99deb72a7

1 Like

Hi @riannag, I have created another video for you: https://www.loom.com/share/8670a63023f2452cb326dc910c127e04

Please go through and adjust and remove your neg margins. they will get you into trouble later. Also, use flexbox instead of columns as well.

My opinion they will treat you much better. Here is some tutorials on them from Webflow: https://university.webflow.com/article/intro-to-flexbox

Hi Brandon,

Thank you for your help, again! I know I need to remove the negative margins, I just haven’t had the time to dedicate to playing around and getting everything to work.

I added everything to one grid, and it looked great for a few minutes… then… it morphed back to being stacked once I tried to adjust my margins for a paragraph in the mobile portrait view. I undid my changes to the margins and must have done something else because I could actually watch the grid go from pretty and neat (like in the video) to being stacked and large. (I didn’t even have my hands on my computer.)

I tried to make adjustments, and now the grid is one row, and I can only add 4 items to it.

Would you mind taking one more look? https://preview.webflow.com/preview/bluecart?utm_source=bluecart&preview=39b6c3b9afd2e6a52286dd56da0b6eb3&mode=preview&pageId=5cdb325b35ab18b99deb72a7

Thank you :slight_smile: