Streaming live at 10am (PST)

Columns block like float element when . you choose grid for mobile


#1

Hello

I have a problem with columns.

When you create a column element with 6 elements for example
http://test-menu-drop.webflow.io/colonnes

If you choose to split in mobile landscape in multiple of 2 or 3 elements, the lines are not balanced

You can see in my example, with different content (and different heights), columns becomes like floatting elements and not right lines.

Why i can’t have a line 1 with column 1 and 2 and after a line 2 with column 3 and 4 and after line 3 with column 5 and 6 and all lines with min-height of the biggest element of each line

Is there any solution to have balanced lines with variable content without add fixed height to columns?

Thanks for your help


#2

To help fix this, I would recommend not using the column feature and just use GRID. You wont have that issue and will be much happier with the outcome of your design.


#3

Hello

Thanks Brandon for your answer but Grid is not really supported by common browsers.
I need a more standard solution :frowning:
Thnaks


#4

Use FlexBox then. But GRID is available on Chrome, Safari, Edge, and Firefox.


#5

You have right thanks i m gonna use flexbox
Grid are not supported by Ie and edge
I thought there was a solution just using the columns
Thanks


#6

Alex, its TIME to stop worry about IE support altogether. You are looking at less than 1% of the population that still uses IE!


#7

@alex12 I agree with @WebDev_Brandon
You can still use an ifIE for the last Internet Explorer users and invite them to upgrade their browser.