Issue with several columns of different sizes

Asked on September 26, 2015 in Troubleshooting.

HI There,
Today I tried to build a layout using a content widget which has the following layout:

12 of 12 columns
4 of 12 columns, 4 of 12 columns, 4 of 12 columns

The idea being that you get one column on the top and then 3 directly underneath it. However the layout breaks, I end up with
4, 4

(i.e. the last small column breaks onto a different line) – I’m not sure this is a bug as such, but is there a way to fix this so, for instance, when a “row” is full, it wraps it in a div and allows for another row to be filled.

Hope that makes sense, i’ll look into fixing this myself today, but just wanted to put it on your radar and see if you had any solutions?

Sam Skirrow Power User

I think the issue is this piece of code here. It definitely fixes my immediate problem, but what are the consequences of changing this code from:

.row .span-2:nth-child(6n+7), .row .span-3:nth-child(4n+5), .row .span-4:nth-child(3n+4), .row .span-6:nth-child(2n+3) {

clear: left;



.row .span-2:nth-child(6n+7), .row .span-3:nth-child(4n+5), .row .span-4:nth-child(3n+4), .row .span-6:nth-child(2n+3) {

clear: none;


on September 26, 2015.
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on September 29, 2015.

    Remember to never change code, you would only be resetting it in your plugin/child theme stylesheet with an override. I think resetting the clear there will adversely affect woocommerce product archives.

    Your specific issue only seems to occur when the 12/12 row comes into play. If you delete it, the bumping shouldn’t happen. The workaround is to use two widgets and remove the title, description,  and top margin/padding on the second(set them to 0 in Advanced).

    We do have an open issue on this and need to reconcile the developmental requirements with the designer’s framework rules. Hopefully it will be in for 1.2.5