I’ve made a page with multiple rows of five columns that looks great on a desktop or an iPad in landscape, but on mobile, it puts each column, one on top of the other, and there’s zero separation (it stacks even if I put my iPhone in landscape). I was wondering if there was some way to force the columns to either not stack, but appear side-by-side, even if it’s just two at at time, and/or if they are going to be stacked, to put some sort of separation between them.
Hi There,
The column elements are meant for responsive feature. Which make content to view properly in different size of devices. You can make it side by side in mobile device by adding custom css, which is not recommended for a responsive site.
Regarding your question about the gap between section, you can add classic gap element and hid them in Desktop and iPad view, so that the gap will maintain in the mobile device only.
Here is a screenshot explaining how to do that.
Hope this is clear now.
Thanks
Thanks for the reply Basanta. I appreciate it.
I tried adding the gap as you suggested, but it just makes the section itself longer. The reason I added the drop shadow to each column was to give it some separation, but in mobile, when they stack one on top of another, the shadow appears on the sides of each section, but only at the bottom when it is the last column of a particular row. All I want is for each column to be separate from the column before and after it.
Hi There,
I was wondering if there was some way to force the columns to either not stack, but appear side-by-side, even if it’s just two at at time,
That is actually possible with Custom CSS but we won’t tolerate that, for a couple of reason a) your content will be squeeze/over-flow if you force 5 columns in a narrow viewport, b) if you make a 5 column a 2 by 2 layout, the last column will be odd.
With that said, keeping the columns stack in mobile would be the ideal choice. We can add a margin-bottom to each of the columns to separate them. To do this please add this on your Theme Options > CSS
@media (max-width: 767px) {
.matchup .x-column.x-1-5 {
margin-bottom: 4%;
}
.matchup .x-column.x-1-5:last-of-type {
margin-bottom: 0;
}
}
Then add a CLASS matchup to those Sections.
Keep in mind that you need to hide those empty 1/5 columns on small and extra small screen using the Hide During Breaks so those empty columns won’t bother you with additional spacing on mobile.
Hope it helps,
Cheers!
Thank you, that seems to work…I can’t seem to find the Hide During Breakpoints option, though…I’m selecting the unused, or empty column, but I don’t get that option.
You’re always welcome!
HIDE DURING BREAKPOINTS is under CUSTOMIZE TAB.
See this: https://screencast-o-matic.com/watch/cbXYnm20dz
Ohhhh, I see…thank you 
I appreciate all of your help, guys. Cheers!
You are welcome!
Sorry to bother you again…the separation of the stacked columns worked, but the hiding of the unused columns has not worked. I followed the directions, clicking the column with nothing in it, choosing customize and selecting the two options on the right side to hide the breakpoints for mobile devices. It’s really not a big deal, but if there’s something you think I’ve missed, please let me know.
Cheers.
Hi There,
Please go thoroughly on each of your empty columns, and make sure the small and extra small Hide During Breaks is turn on!
Take this example, this is an empty 1/5 column that is visible on mobile.
You’ll see that even if it does not have any content, it takes space in the content area (blue/orange highlights).
While the 1/5 column below that, does not highlight anything in the content area because that column is hidden.
I know you enable the Hide During Breaks on that column without taking a look at editor because of the class x-hide-sm x-hide-xs present to it, unlike the other 2 columns above that. Hope this makes sense.
And keep in mind that your site is under a caching plugin, please clear your caching plugin everytime you made changes and preview your site.
Cheers!
Ahh, that caching plug-in is why it took soooo long to load every time I went to edit the page w/ Cornerstone. Now it loads nearly instantaneously. Thanks!
You’re welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.