Streaming live at 10am (PST)

Column padding bug fix


#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


No left/right padding in nested rows/columns
#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.


Difficulty getting columns to apply padding
#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


#6