Removing a column between desktop and tablet breakpoints

I would like to create a responsive layout that goes from four columns at desktop to three columns at tablet.

The fourth item would be hidden on tablet. The other three items would expand to fill the container. This is just to demo an e-commerce carousel functionality.

Is this possible? Is it possible to do the same on a grid wall of products but to have the content reflow in the lower number of columns on tablet?

1 Like

Hey @wes, thanks for the question! It’s possible to hide the fourth column (in Settings → Visibility), but the “the other three items would expand to fill the container” is much harder. You could, however, do this manually, like so:

  1. Instead of using columns, just place 4 Block elements and give them the same class, e.g. “Item”
  2. Give the Item class a width of “25%” (you can just type that into the input box and it will switch units).
  3. Set the Float to Left - you should now have 4 boxes side by side (you may want to put the 4 of them into another container in case you will have other elements right below the 4 boxes, that will force a “clearfix”)
  4. Go down to the Tablet device; the columns should get slightly less wide
  5. Select the last column, go to Settings (D key) and uncheck the Tablet icon under Visibility (you might also want to uncheck the phone ones if you want this column to only appear in Desktop)
  6. Set the width of the “Item” class to “33.3333%” - you should now have 3 columns side by side
  7. Go down to the Phone screen, and set the width to “auto” or “100%” and set the Float to None (the left most button). This will make sure that each of your items goes all the way across in the phone view.

I know it’s kind of a pain, but that’s the best way I can think of achieving something like that in Webflow.

2 Likes

It worked! Thanks. That was easier than writing the HTML/CSS.

1 Like