Column not collapsing for mobile

Hi,

I am working on a new page and there are some issues. When I resize the screen, one of the columns is not changing to the mobile version. You can see that when you size the screen below 768px, the middle row stays in two columns rather than stacking. Any idea how to fix this? Thanks!

Hi there,

Thanks for writing in! That’s happening because of the custom CSS you’ve in your child theme’s style.css file. To fix the issue, please find and remove the following code from your child theme’s style.css file:

#x-section-8 .x-container {
    display: flex;
}
#x-section-8 .x-container .x-video {
    margin: 0;
}
#x-section-8 .x-container .x-column {
    margin: 0;
    width:50%;
}

You might have added the above code for a specific page but it is effecting your other pages that has the section with an id x-section-8 like the page you shared. I’d suggest you to add a page id in your code so it doesn’t effect other pages, so your code code will become:

.page-id-6 #x-section-8 .x-container {
    display: flex;
}
.page-id-6 #x-section-8 .x-container .x-video {
    margin: 0;
}
.page-id-6 #x-section-8 .x-container .x-column {
    margin: 0;
    width:50%;
}

.page-id-6 is just an example ID in the above code, you should replace it with actual page ID. To find out the page IDs please check https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps!

Thanks so much for your reply. I removed the code from the child theme style.css, but it did not fix the problem. Any other ideas?

Hi again,

Did you clear the browser’s cache after removing the code? I checked your site on my end and it’s working fine now. Please clear all the caches and then test the page again. Please see https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.W6ALLegzZPY

Let us know how this goes!

That did it. Thanks so much!

You’re most welcome!

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