Help with stack columns

[rcbarros]

Hey guys!

I am not sure what would be my best direction but we are looking for to build 5 “divs” side by side and stack them when you resize the browser as you can see https://www.inmotionhosting.com “plans”

please advise!

Thanks.

[ruenel]

Hello Robert,

Thanks for writing in!

When you create a section in Cornerstone or Pro editor, you can set up a section and a marginless column row with up to 5 columns. This five columns will also collapse in smaller screens.

Based on the example site, please also consider using the Classic Responsive Pricing element. You can check out the demo here: http://demo.theme.co/integrity-1/shortcodes/responsive-pricing-table/

Hope this helps. Please let us know how it goes.

[rcbarros]

yes indeed. matter fact I took this approach. The only thing I am having problam now is how to get the mouse over effect?

[friech]

Hi Robert,

That hover effect is not a feature of the theme, but you can achieve that with a custom CSS. Please add this to your Page > CSS

.plans .x-container .x-column {transition: all .2s ease-out;}
.plans .x-container .x-column:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0,0,0,.15);
}

Then add the CLASS plans to your Section.

Hope that helps,
Cheers!

[rcbarros]

Thanks Guys. It looks awesome.

[basanta]

You are most welcome!