Columns Wrapping on Mobile

[JK2013]

I’ve read through several of the posts in the forum and tried code that’s been provided as solutions to no avail. I haven’t been using cornerstone to develop my website. But some of the solutions I’ve read provided a means using cornerstone, but cornerstone’s preview functionality wasn’t working, so I’ve already posted in the forum on that issue.

Ultimately, my goal is to have three columns show as three columns on mobile. In Mobile view, they reduce to one column on top of each other. My goal is to prevent the wrapping and have all three columns show up side by side on mobile.

The webpage I’m working on is: https://www.garrettandwalker.com/top-rated-greensboro-speeding-ticket-lawyer/

Here’s what I added to my custom css and it didn’t work:

@media (min-width: 481px) and (max-width: 767px) {
.break-in-three .x-column.x-sm {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 4%;
}
.break-in-three .x-column:nth-child(2n) {
margin-right: 0;
}
}

/Make the image take the width of columns/
@media (max-width: 767px) {
.break-in-three .x-column .x-image,
.break-in-three .x-column .x-image img {
width: 100% !important;
max-width: none !important;
}
}

Thank you for your help.

[jade]

Hi Jason,

Based on the code you are using, it will only work if the columns are inside a div with break-in-three and the class x-sm in the columns. As I have checked, you columns are directly inside the entry-content div.

Are you adding the columns using shortcodes? If so, try updating your code to something like:

<div class="break-in-three">
    [column type="1/3" class="x-sm"] Place your content in here. [/column] 
    [column type="1/3" class="x-sm"] Place your content in here. [/column] 
    [column type="1/3" last="true" class="x-sm"] Place your content in here. [/column]
</div>

Also, you will have to change the width in the code above to somewhere around 33% since 48% is more than half of the container.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[JK2013]

Thank you for your reply. I made the changes you advised, but it still shows up the same way on mobile. I adjusted the width to 33% and added the div class. Is there anything else I can do? Ideally, I’d be able to use cornerstone, but for some reason the preview isn’t working on my website. Thank you again for your help.

[ruenel]

Hello Jason,

Your code should have work as it is valid and correct. It is not applying to the because the code itself is not being loaded on the page. Where did you added the custom CSS? Have you added it in Appearance > Customizer > Additional CSS, Child theme’s style.css or in the X > Theme Options > Custom CSS? I have a hunch that this is just a caching issue. I can see that you have installed Autoptimize plugin. Please disable this plugin temporarily. Caching and optimizing plugins are best to turn ON when you are done editing/building your site and ready to go live.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

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