Changable column layout per Breakpoint?

[yuan]

Whet we can do right now:
PC & Tablet version: 4 Colomn
Mobile Landscape & Portrait: 1 Column Full-width

What I need:
PC: 4 Column
Tablet: 3 Column
Mobile Landscape: 2 Column
Mobile Portrait: 2 Column

Currently, we only can divide column layout on PC & Tablet TOGETHER, Once you set PC version, the Tablet version always follow PC version and vice versa! Also Mobile version is ALWAYS Full width, we can not change it! But many cases I need to make them different layout.

Is that the limitation of Column on Webflow or is there any workaround?

thank you
Yuan

[vincent (Vincent Bidaux)]

Short answser for your case: ditch the column element and go manual.

With more details:

I’m assuming you refer to the Column layout element.

That’s one of the element Webflow bult for you, adding some setting in the Settings tab. While they’re designed to apply to most cases, you can find yourself limited by them.

Also in most cases, anything set in the Settings tab is set for all breakpoints, with a few exceptions (collection lists and columns element have some breakpoint dependent settings, but one again, limited).

But that’s OK.

That’s OK because the columns element is only a shortcut. It’s build with HTML elements and CSS settings, nothing you can’t reproduce manually and get full control of.

You can make a series of divs and set them the width you want, set how they float, stack, behave, using inline-block, float, Flexbox or a mix of all of that.

Basically, use a base grid div and set it to 25% for desktop, 33.33% for tablet, and 50% for mobile landscape (portrait will then inherit the 50%). Now inside of those divs, put another div to deal with margins and paddings, then another div with your content (one div for layout, one div for spacing/padding/margins and one div for content… rule of threes)

I’m creating grid systems all the time with Webflow. In the image below, the top green part is a grid system made out of Column elements, and below, a grid system created out of single divs.

http://vincent.polenordstudio.fr/snap/g18o6.jpg

[yuan]

Hi Vincent,

Ah, thats it! thank you for your explanation and method.
it solve my problem a lot! you are right, by manually make div, it give more control.

[Maurice]

Hi @vincent,

really good time for me to see this, because I´m working on a project where I need a custom grid. My first question where you could adjust the grid overlay settings to your custom grid? And how you setup custom breakpoints?

I´m trying to build a custom grid with a max-width of 1200px, so that it looks also great on bigger screens. But I´m struggling with the vertical iPad view. Here is a link to an example page of my project.

Greetings,
Maurice

[vincent (Vincent Bidaux)]

@Maurice

where you could adjust the grid overlay settings to your custom grid?

I don’t, I use Webflow grid. You think I use custom because of my screen capture. But I just use a series of image backgrounds to make the grid overlay look different. I also use gb patterns to make horizontal lines, in order to work on the vertical typographic rhythm (when lines of texts of different blocks, columns, are always aligned horizontally.) Like this:

http://vincent.polenordstudio.fr/snap/ybuvk.jpg

Here is the link to the red grid overlay image: https://daks2k3a4ib2z.cloudfront.net/586a8a7d048e10c52019b6cb/586a8a7d048e10c52019b6de_grid-pattern-982-red.png (it’s one pixel height)

@Maurice

And how you setup custom breakpoints?

I never do. I use Webflow’s ones. They’re simple and well defined. Completely understand the need to have custom ones though.

@Maurice

I´m struggling with the vertical iPad view

tell me more about it. Portrait normal non-pro ipad view should always be the “tablet” view of Webflow. It’s well defined for that. Landscape ipad view defaults to the desktop view.

[Maurice]

@vincent

I don’t, I use Webflow grid. You think I use custom because of my screen capture. But I just use a series of image backgrounds to make the grid overlay look different. I also use gb patterns to make horizontal lines, in order to work on the vertical typographic rhythm (when lines of texts of different blocks, columns, are always aligned horizontally.) Like this:

Ok, I understand, but it would be much more quicker and also easier if we could customise the webflow overlay.

@vincent

I never do. I use Webflow’s ones. They’re simple and well defined. Completely understand the need to have custom ones though.

Of course there are well thought, but I think a iPad landscape and one for larger screens would complete it.

@vincent

tell me more about it. Portrait normal non-pro ipad view should always be the “tablet” view of Webflow. It’s well defined for that. Landscape ipad view defaults to the desktop view.

I struggle with the iPad landscape view. I have defined my own container div with a max-width of 1200px and width of 100%, so that it will look nice on larger screens.

The main problem that I have, is that an landscape iPad has a width less than 1200px and that causes layout problems. On my 15" inch MacBook all looks great, but I think the responsiveness of my custom grid could be setup more effectively.

Read Link | View Link

[vincent (Vincent Bidaux)]

@Maurice

Ok, I understand, but it would be much more quicker and also easier if we could customise the webflow overlay.

That would be fantastic. At least chosing among a handful of popular grids. You have to realize some of the components (Culumns, collection lists) and their settings depends on how the grid is set up. And particularly on how wide the gutter is. For example, those default -10px padding on columns.

@Maurice

Of course there are well thought, but I think a iPad landscape and one for larger screens would complete it.

@callmevlad, Webflow’s CEO, will be live on the workshop later today. Feel free to attend and ask directly A larger breakpoint is “around the corner” for a long time now.

@Maurice

I struggle with the iPad landscape view.

Yeah, by using a large 1200 bp with everything set in px in it, you face such issue, that’s normal. Instead of being 1200px, your section should be 100% with a max-width of 1200px. It will shrink on iPad.

[Maurice]

@vincent

That would be fantastic. At least chosing among a handful of popular grids. You have to realize some of the components (Culumns, collection lists) and their settings depends on how the grid is set up. And particularly on how wide the gutter is. For example, those default -10px padding on columns.

Maybe in the near future comes something, hopefully

@vincent

@callmevlad, Webflow’s CEO, will be live on the workshop later today. Feel free to attend and ask directly A larger breakpoint is “around the corner” for a long time now.

If I can do it in time

@vincent

Yeah, by using a large 1200 bp with everything set in px in it, you face such issue, that’s normal. Instead of being 1200px, your section should be 100% with a max-width of 1200px. It will shrink on iPad.

Thats what I´m already did, but I need to adjust some other elements on this breakpoint. For example the width of my columns and other things like that.