Overlap Columns On Mobile

[ArmshouseGroup]

Hi there,

If you have a 2 column layout (text one side, graphic the other), how can you get the text column to be on top of the picture when you shrink down to mobile?

When I say on top, I mean so that the image column becomes the background to the text column. Am using PRO.

Many thanks,
AG

[prakash_s]

Hello @ArmshouseGroup,

Thanks for writing to us.

Please follow these steps to achieve the layout that you want.

1. Go to the Cornerstone page builder

2. Add a row with two columns
   Please have a look at the structure
   

3. Add a custom class to column 1 and set the background image in column 1
   

   

4. Add an image on column 2 and set the column hide on a small device

Now add this custom CSS to hide column 1 background image for the larger devices.
Pro—>Theme Option —>CSS

@media (min-width: 766.99px){
.custom-background .x-bg {
display: none;
}

}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[ArmshouseGroup]

I tried this and it does work, so thanks. The only thing is that when setting the image as a background to a column, you lose the ability to apply effects to it.

I’m trying to achieve a greyscale or blur effect on scroll, so would be great if there was some other way to do the overlap. Even if I have to use something other than columns, ie grid etc.

Any ideas?
AG

[ArmshouseGroup]

I found this tutorial video on Themeco grids and was able to do what I wanted. Awesome stuff!

CSS Grid: Cell Placement & Overlapping Content (Intermediate)

[nabeel]

We’re glad you sorted it out.

Cheers!