Streaming live at 10am (PST)

Column padding bug fix

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

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

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

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:

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