Is it possible to have just the two columns in tablet view like shown for phone???
(I have a four column layout)
1 Like
Yes you can. I am not sure what is going on with your designer. In mine my column setting has all of the options available for all view types. If all you want to do is have a horizontal and evenly distributed columns on the tablet view you can still use the custom option and just make two columns that are even. This is assuming you also want two columns that are even on the desktop view as well.
No, I need four columns for desktop…
Just to make it clear, Do you see a double column option for tablet (like circled in my image), whilst having a four coloumn layout??
Ah, I misunderstood. I don’t see that option when I have 4 columns. I think your best bet would be to use div blocks to create your column structure. On your desktop have four divs that have a width of 25% (with no padding) or less with padding. On the tablet view give the same divs a width of 50%(with no padding) or less with padding. make sure you float your div blocks to the left.
1 Like
@smmj Hi Sam,
The answer is no, there is no 4 column option that will display 2 columns on tablet. No clue why.
Alternative:
You can build a two column row and nest a two column row inside of each. It will provide some additional flexibility in media queries.
Just be aware of some potential issues it creates (below). Hopefully these will be a thing of the past once the new system and grid are in place.
Inheritance bug:
Nesting a row of columns inside another column creates some really busted, awkward inheritance issues with padding on the columns. I have explored this a bunch to try to file a proper bug report with an example (not sure I have ever fully wrapped my head around it). I am pretty certain it is not an error on my part, but I can never make padding behave correctly when nested. @thesergie @cyberdave I feel pretty certain you guys have already encountered this bug and are building the miracle cure into the new system. If you need an example I would be happy to take another crack at documenting it.
Possible cause?:
I think it is an error in how columns are zeroed using negative margin at the root level in the designer or bootstrap. In this case, margins can be an ugly unexpected property (if it does not show or is displayed as zero to the user) at the root of a design component because it breaks layout flow pushing elements out of the parents’ bounds. With nested instances inheriting the invisible margins the error becomes more pronounced. I think maybe nesting padding (push in) would be a better way to sort it? Many grid and column systems (masonry for example) use divs with nested padding only, eliminating the problem.
Solution / Work Around:
Zero padding on all columns and nest an intermediate div. The div properties will allow you can regain proper control over padding without the unexpected margin error.
1 Like
Or do what @Davidn suggests and avoid the whole thing by rolling your own. I do frequently. I miss the column widget in those cases though. It is nice to be able to tweak column widths on the fly.
I get around this by using the visible property. Then I create a column section specifically for the tablet size - I hit this problem all the time 
2 Likes
Thanks Robert for clearly explaining this in detail!
Haha, while I love the genius of this, I wonder if this will make the website lag, (my website’s media rich)
I am testing this out again now and it is very different than I thought:
It is just that the padding on the sides of the child columns is always zero (overridden / inherited) and cannot be adjusted. This is result from the inspecting the element of a nested column on a published site:
.w-col .w-col {
padding-left: 0;
padding-right: 0;
}
the attribute for column-left and column-right is set to 70px in webflow and is being overridden (above).
.column {
height: 100%;
padding: 70px;
padding-top: 70px;
padding-right: 70px;
padding-bottom: 70px;
padding-left: 70px;
}
Nesting columns breaks the rewrap for devices and makes them somewhat confusing on smaller devices. The child height is maybe not be calculated by the parent?
…so what would you best recommend to achieve the double column in its cleanest form for now?
Maybe a small work around, that doesn’t give you any option to change it easily, but you’ll get the idea.
Build the whole thing as you would and is most closely possible with WF. Tweak it with custom css in your text-editor to overrule the .w-col with and !important, copy-paste it in an embedded field. That should do the trick.
If you want to save the code you use in the embed (before you hard-code a change) make a symbol on a page you don’t use. You can use it again if you want something changed.
It works great for most of my projects so not sure if it will have a huge impact on a site rich in media But it does work 
You can always use some detection code and swap the sections in and out as necessary as its rendering the html server side?
https://webflow.com/design/split-columns?preview=aeb90eeee98203186fc43a451433e464
http://split-columns.webflow.com/
this is using standard columns nested in float divs. It provides the best of both without the wackiness. It contains 3 simple floats:
33.34% 1/3 column
66.66% 2/3 column
50% 1/2 column
You can nest any variation of columns and still have control over nudging top level column widths on the fly. Very flexible and simple. Look at the Navigator and you will easily be able to sort it out. I use padding in a nested div for my space between columns as it simplifies reuse and affords quick drag and drop between containers.
Let me know if you have any questions. A zillion ways to rework something that should just work
@Robert_Craig 's approach should be very solid as well and ultimately very flexible.
@Diu - thanks for the suggestion. A simple overwrite if the overwrite does make a bunch of sense and fixes the issues. The auto height miscalculation is ultimately what killed nesting columns for me. It starts getting really hacky very quickly.
3 Likes
Thanks everyone for your input and clearly discussing the work-arounds and different options!
2 Likes
Thanks for all the research and discovery @vlogic. @smmj, that’s definitely a limitation with our current grid system. The two workaround that I personally use is either add custom code that overrides presets or create my own custom grid using divs and floats. We’re definitely considering these limitations when we’re going to tackle a new version of the grid system down the road. Sorry for any problems you’re running into along the way
1 Like
I know this is an old topic, but I hadn’t seen a solution elsewhere on the forum, but I have worked it out myself. So I thought I would post the reply here.
It’s actually quite simple as webflow uses a customised version of the bootstrap 2 grid system by placing a w- infront of the bootstrap grid classes. So for example to make four columns into two columns in bootstrap 2 at tablet size, you would add a class of col-medium-6 and so if you want webflow to make it two columns at tablet size you simply need to add and create and add a new class to the column at desktop size with w- infront of the bootstrap class.
So to make it two columns at tablet size just add a new class of the following to each of the columns:
w-col-medium-6
4 Likes
@mention79, that was genious! Beautiful layout as well 
1 Like