Make right column collapse over the left column on mobile devices

Hi, I would like to know the code to make the right column collapse over the left column on mobile devices. The content bands where I would like to make this change are disposed like this : 3/4+1/4. And also, I would like to apply this behaviour only to certain pages, so I guess the code would have to imply a class name that woul be added on the content band settings.

Thank you for your help.

Hi There,

Thank you for writing in, please utilize the Hide During Breakpoints instead. Duplicate your 3/4 + 1/4 Row, and make the duplicate Row reverse the column 1/4 + 3/4.

Then hide the original Row on small, and extra small screens (mobile), do the opposite on the duplicated Row, hide it on Extra Large, Large, and Medium screens (desktop).

You will now have 2 Rows that switching in desktop and mobile view.

Hope it helps,
Cheers!

Hi,
it does seem like a good idea, but I don’t use Cornerstone. How do I do it through WPBakery Page Builder?

I also found this code on forums:

@media (max-width:767px){
.home #x-section-4 .x-container.marginless-columns .x-column.x-1-4 {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 20px;
}

.home #x-section-4 .x-container.marginless-columns .x-column.x-1-4:nth-child(2n+1){
clear: both;
}

.home #x-section-4 .x-container.marginless-columns .x-column.x-1-4:nth-child(2n) {
margin-right: 0;
}
}

Could I use this code but by applying it only to a certain “class” of rows? How do I asign it to a certain class?

Hi again,

You can give both of your columns a class e.g custom-left-col and custom-right-col and then using CSS you can hide your left column and make the other column full width:

You can then make use of the following code:

@media screen and (max-width: 767px) {
    .custom-left-col {
        display: none;
    }
    .custom-right-col {
        width: 100%;
    }
}

If you want the above CSS to be outputted on that particular page then click on WP Bakery’s page settings (see screenshot)

And then paste the above the code inside.

Hope this helps!

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