Streaming live at 10am (PST)

Responsive Problem with 2x2 elements

Hello everyone.

First of all I am very new to webflow but a friend of mine has a website made by some guy who ran away right after publishing. Now he asked me to help with fixing a problem.
So its about 4 elements in a row that look good on desktop but on mobile, it does not apply the 2x2 columns. For some reason, it is doing 3 rows with 1, 2, 1 Elements.

As I said, I am not very familiar with webflow so I dont´t want to crash anything but offered to find some help.

Any suggestion, how to fix this?
Thanks a lot :heart:

Here is my site Read-Only: Webflow - Webseite

If you select the column, then go into the settings panel, you’ll have the option to make the item span the full width of the container (click the first option that has the arrows going left and right under “iPhone portrait”).

Once you click that, you’re good to go.

Hi and thank you, @bryanmanio. I see that I forget to mention what the result should look like.
We do want to have 2 Elements in one row. So 2x2 for the first part and after the hide / show Element like this:
x x
x x
x x
x x

Sorry that I forget to mention it.

I really don’t like using that column element because it doesn’t allow too much flexibility. If I were you, I’d just use the grid component, then add a container for each one of your items, then drag in the image, heading and text inside each container. I set mine to flex (vertical) and centered the items within and it’s working great.

Ok that works perfect. Thank you very much!

1 Like