Column padding bug fix

Community resources Show & Tell
1

We faced a problem while developing a newspaper blog project, cause by default (bug?) webflow doesn’t allow columns that live inside a row to have a left, right padding of their own. That can be found in webflow’s css line 10

.w-col .w-col {
padding-left: 0;
padding-right: 0;
}

I created this script http://outboxed-dev.net/scripts/webflow/column-fix.js that gets all nested columns and appends to them the last defined left, right padding within any class of them (except webflow’s ones).

Let me know your thoughts

2

You can see a demo here: http://outboxed-demos-dev.webflow.com/containers/rows

3

After working a bit with Webflow, you realize you should never style columns. Put a div inside and style it instead. It gets too tricky to style columns and you regret it fast.

1 Like
4

Yeah it’s a sort of a ‘hacky’ (but solid nevertheless) solution, but I as I told you in a previous post, I like programming :wink:

5

I don’t see ‘nesting’ as hacking… and nesting is very cultural for CSS workers, a few years ago the more you nested the more solid your site was.

Also, the tip to not style the row coulmns element, I think I got that from a Webflow dev so you know, I kinda respect it :smiley:

1 Like