Columns don’t align properly

  • Resolved philbee

    (@philbee)


    7 years, 6 months ago

    Maybe it’s just me, but creating a layout with
    1/3 2/3
    1/3 1/3 1/3
    2/3 1/3
    columns in Kadence’s otherwise very, very nice interface gives me non-aligning blocks,
    ie: the 1/3 blocks have different widths, depending on if they’re next to two other 1/3 blocks or a single 2/3 block.

    I’m sure there’s a way to override this, possibly using some flex-basis wizardry, but it would be nicer if Kadence did this right, IMHO.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Ben Ritner – Kadence WP

    (@britner)

    7 years, 6 months ago

    Hey,
    This comes down to the gutter width.

    If there are only two columns in a 1000px container then the width for columns is 970 + 30px gutter in between.

    323.33px + 30px + 646.67px = 1000px;

    For three columns that covers two gutters, your column width is 940 + 60px gutters in between.

    313.33px + 30px + 313.33px + 30px + 313.33px = 1000px;

    So you can set the Gutter to none. Then any internal spacing between items you can do through padding.

    “but it would be nicer if Kadence did this right”

    I’ll have to think about this, I’m not sure it’s as much about right and wrong. I appreciate the feedback and I will look for different options.

    Thread Starter philbee

    (@philbee)

    7 years, 6 months ago

    Hi,
    actually, I played around a bit and it’s pretty simple – in my 3 columns example, the 66% block (eg right block in a kt-row-layout-right-golden row) needs to have flex: 1 1 {width of margin}; or as a separate CSS flex-basis: {width of margin};

    (margin-right = Gutter)

    See https://davidwalsh.name/flexbox-layouts

    The Kadence plugin is really nice, BTW!

    • This reply was modified 7 years, 6 months ago by philbee.
    Plugin Contributor Ben Ritner – Kadence WP

    (@britner)

    7 years, 6 months ago

    Nice, I’ll add that to the next update.

    Thread Starter philbee

    (@philbee)

    7 years, 6 months ago

    Cool 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Columns don’t align properly’ is closed to new replies.