Columnize effect created manually

[kirk74]

Hi, I have some large content sections of text with image below, and I want a columnize effect (2 columns with vertical line in between… BUT I can’t use Columnize because i DO need to control where the column splits, as I don’t want the text and the matching image separating.

So I am using the latest Cornerstone and X, and I am easily able to recreate the effect manually by using marginless columns, and then manually adding the padding I need, and a border to the left side of the right column.

BUT - when I am on a smaller screen and the two columns become one, it doesn’t look quite right because I have extra padding and the border.

SO - Can you pls suggest a fix to this…

Either a way to control where Columnizer breaks (which I imagine is not possible) … OR… a way to manually have the vertical line in between columns but when columns snap into one column also remove this extra space and border?

Thx so much, will add page details in private post.

[christopher]

Hi there,

I like your second method better using the column system of the Cornerstone, using the Columnize shortcode will make the thing too complicated to handle when the page gets bigger and bigger.

I suggest that you consider having a none padding version with 1 column for the mobile and the 2 columns with the padding option for the desktop.

So create those two versions and use the Hide Based on the Breakpoint option to hide one in desktop and show on mobile and vise versa for the other one.

Thank you.