Help formatting columns for mobile portrait

Design help General
1

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!

2

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.

1 Like
3

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
4

Hi @riannag, I have created another video for you: Loom | Free Screen & Video Recording Software | Loom

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: Flexbox | Webflow University

5

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:

6

Hi @riannag, have you had a chance to get this to work to your benefit?

I am trying to decipher your notes here and I am not sure where you are having your troubles? Your grid placement and layout looks great with regards to your image blocks in the “Interested in Learning More” section.

Where are your other issues? You can send me bulleted notes for this as it will better help me understand your main issues/problems.

Thanks again,
Happy Designing,

Brandon

1 Like