Multiple Horizontal Columns for Mobile

Hi There,

I attempted a few other of the solutions listed in the forum, but have been unable to get the three columns at the bottom of my page at the XS breakpoint to sit side by side.

Could you give me the correct code to do this?

Thanks!

Chris

Hi There,

Thanks for writing in!

Can you please clarify what exactly you want to achieve here. You can give a screenshot or mockup for that so that we can suggest you better.

Thanks

No problem.

Set your browser to be 480px wide or smaller (the default XS breakpoint).

If you look at the bottom of the page, there are three columns containing social icon images.

the columns are stacked vertically over top of each other.

I would like the columns to instead sit horizontally beside each other as they do on the desktop / XL breakpoint.

Thanks!

Hi there,

You use a separate section for that specific breakpoint using the hide during the breakpoint option which is a good practice.

Now please go to the Customize tab of that section in question and add the class of sidebyside there:

Then please add the CSS code below to X > Launch > Theme Options >CSS:

.sidebyside.x-section .x-container {
    display: flex;
    flex-flow: row nowrap;
}

As a side note, it is very important that you back up your website completely and update the theme to version 6.0.4 and the Cornerstone to version 3.0.4.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.