▼
Streaming live at 10am (PST)

Columns are not being very responsive...?

Design help General
#1

I am using a Column element (within a Container within a Section). The column element is set up with 6 columns, and I have set it up to adjust to 3 columns (2 rows of 3), then 2 columns (3 rows of 2), then 1 column (6 items stacked). However, only my desktop and mobile-portrait views are working properly. For the tablet and mobile-landscape views the wrapping is wonky. I cannot figure out why.
Desktop=OK

Pasted image1060×137 20 KB

Tablet=I don’t know why the “Give feedback” column didn’t wrap over to become the first item in row 2…?

Pasted image825×202 21.6 KB

Mobile-landscape=Again, seems to have issues wrapping appropriately.

Mobile-portrait=OK

Pasted image343×559 20.5 KB

Per my settings, I was expecting this to work like magic, but perhaps I am missing something being so new to this tool.

Pasted image242×768 14.3 KB

Any ideas…?

#2

Could you share the public link of your webflow site? Go to your Dashboard and click on the “share” button at the top.

#3

@vincent here is a link. https://preview.webflow.com/preview/bigfooter?preview=786ddbb2b7e3cbaa5761617818ba8ea7
Let me know if you know of a way to get the columns to wrap per the specifications.

#4

Hi I can’t figure if this is a bug, but I see what is does to your element.

When someone of myself has a bug with the ROW element, I always try the same thing: I remove all properties given to the Columns elements and add a div inside, to wrap all the columns content. Here, it didn’t solve the issue, but as soon as I gave it a height, it fixed the problem. 60px was ok. I tried removing all the divs and apply the height to the column, and it works too. It looks like columns are just interpreted as boxes and they wrap as soon as they have the room to.

That said, with experience, I recommend not giving any property to columns. not even a border. Put a div inside as soon as you create a ROW element.

2 Likes
#5

Yes, you are right. Adding a value to height (instead of ‘auto’) took care of the issue. I will further put the divs inside the row elements (and instead add the necessary properties to the divs), as you suggested since it sounds like a best practice that may prevent other issues down the road. Really appreciate you taking the time to help me out, as this one had me quite perplexed. Thanks so much @vincent !

1 Like
#6