I want 3 columns on desktop, 2 columns on tablet and 1 column on mobile...HOW?

I want the content on my website to change column numbers for each device and view. I want 4 columns for desktop, 3 columns for laptop, 2 columns for tablet and mobile landscape and one column for mobile portrait. How do I do about doing this in Webflow, and to have the content dynamically adjust it order based on the viewport.

Thank you :slight_smile:

Richard Nash
Los Angeles, CA

Hi Richard, right now we have these limitations for columns: Desktop and Tablet have the same number of columns and you can make columns stack for mobile devices.

You can always create your own column structure using Blocks. This is how you would do it:

  • Add a block.
  • Give it a class.
  • Float: left
  • Give it a % width based on how many columns you want in your row (50% if you want 2, 25% if you want 4 columns, etc)
  • For desktop you can set 25% width for 4 columns. On Tablet set 33.33% for 3 columns. On Phone L set 50% for 2 columns. On Phone P set 100% for 1 columns.

ok, thanks Sergie, i will give this a try. It seems as if this way might be better than columns for what I’m trying to do…

1 Like

Hi there, I tried using this same approach for trying to create 8 columns. It worked, and I created each block to be 12.5% width for 8 blocks, but I want to add padding between the blocks. How can I add padding but still have the blocks align to everything else?

Hey Allison, there are several ways you can do it. You can add a % left and right margin on all of the blocks. That might not be what you want for the first and last one. Another option is to add right % margin on all of the blocks and for the last one you can add second class to the element and call it “last” and remove that right margin. That will work pretty well. The last option is to do either the first or second option, but you’ll have to add these blocks to another block and give that block some negative margins to offset the margins on the very outside block (this is how Bootstrap 3 does it).

Note: In the first two cases you’ll have to recalculate the width to account for the added margin % you added so it all equals 100%.

Running before I walk
The setup:
I am hoping to create something a bit different with the help of Webflow. I’m wanting to design and build a responsive portfolio with a gallery. The difference is I would like the preview images to be a grid of interlocking triangles. I also want this to be responsive with fewer but larger triangles on the cascade.

I have managed to create the shapes using the border widths but then I read the reply to Richard about creating it with Blocks. I assumed I just needed to copy and paste to get the number across the page that I wanted.

The problem:
When I then tried to create the preview by adding in an image, it placed the image at the top of the triangle (which is no longer a triangle either for some reason).

Any suggestion to get this working like the reference image below but with padding between each triangle?


Hi @thesergie, I am trying to accomplish essentially the same thing as Richard and have tried using the approach you suggested. However, not all of my photos are the same height, and I’m encountering a problem where it looks like all of the blocks want to start on the same baseline and will not fluidly fall into place. So, to give you a better idea of what’s going on, I’m using a 3 column grid. If the image in the first column is shorter than the image in the second column, and the image in the third column is the same height as that of the first column, the following blocks will not stack in directly under the images in the first and third columns, they leave a negative space and start at the base of the image of the second column. Is there a way to make these blocks act fluidly and naturally fall into place without encountering these spacing issues?


@rimann20 it would be helpful to have a screenshot to see exactly what you have since it’s not super clear.