Overlap and center column 1 over portion of column 2

[444media]

I am trying to achieve a design similar to the 2 sections on this page (below title: “Investment Portfolios”): https://financial.oxy.host/investment/

I have done it similarly so far at: https://bendercareycap.com/off-site-templates/

But I am trying to get column 1 to move down and be centered on the horizontal axis of column 2 (like in the example page above). Plus overlap about 50% of column 1 onto column 2. I can’t seem to figure out how to do that in the settings.

Once this “effect” described above is achieved I need to make sure both columns are centered on the site naturally.

Can this be achieved without custom CSS and just in the settings alone?

Or is there perhaps a better, more efficient way of creating this “look”? Once I get it set, I need to duplicate it about 8x for varies products and services client offers.

Thanks for your help!

[prakash_s]

Hello @444media,

Thanks for writing to us.

Please have a look at this tutorial to learn more about how to set up overlapping columns content.

How to Create Overlapping Content (Part 3)

Hope it helps
Thanks

[444media]

Hi Prakash,

Thanks for sending me this tutorial. I have watched this one, plus parts 1 and 2. But I am still getting stuck. It seems that what I want to do is explained at the 7:04 mark in video “part 2” However, I don’t understand, at that portion in the video, how he has a ROW next to the ELEMENT he wants to overlap.

I do understand how to overlap an ELEMENT that’s in one column over the next column (see the home page of my site)

However, I am trying to get column 1 to overlap column 2, where column one is not just one ELEMENT, but a series of elements (children). I can’t give the column a negative margin, like I can with one element to create the overlapping effect.

Again, at the 7:04 mark in this video: https://youtu.be/Gnm5ZJ2VK6g?t=424
it seems that he is explaining what I want to do, but it’s not working, plus I don’t understand how he has a ROW ELEMENT overlapping an image…the ROW in the video is to the right of the image. No idea how he got it there (it looks like it would be a column, no?)

I tried playing with the CSS too that he gives in the video, but if I don’t have the portion set up as a ROW (it’s a COLUMN), as he is explaining, then I don’t know what to do, as the pieces I want to overlap are 2 COLUMNS (and can’t adjust negative margins to columns).

Thanks for your additional help!

[444media]

I tried adding the following CSS to COLUMN 2 so it would overlap column 1 (then thought I would adjust the Z index so column 1 would be on top of column 2), but this didn’t work:

$el.x-column{
margin-left:-50px;
}

I’m trying!

[tristup]

Hi @444media,

You need to use the x-col class instead of x-column and your code might look like the following.

$el.x-col
{
    margin-left:-50px;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[444media]

That worked perfectly, thanks! And I adjusted the Z index so column 1 overlaps column 2 like I wanted.

However, how do I get the entire column 1 to now be off-set from column 2…meaning, how do I adjust the top margin of just column 1 so that it is lower than the top of column 2? I tried using in column 1 customize CSS section: margin-top:100px; but that didn’t work. It’s just not quite clear in the videos on how to do it to a column (vs. an element)

Thanks!
Tried this, but didn’t work:

$el.x-col
{
margin-top:100px;
}

[ruenel]

Hello @444media,

Please edit your page and do the following:
1.) Remove the green background color in your Column 1.
2.) Insert a DIV element in your Column 1.
3.) Add a green background color to the newly inserted DIV element.
4.) Move all other elements inside the DIV elements.
5.) Apply a top margin and a negative right margin to the DIV element so that it will overlap with the Column 2.

If the above suggestion is not helping, please provide me access to the site so I can make a demonstration. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards,
RueNel

[444media]

I got it! Thanks! I was thinking of trying something like this but with a row element inside the column…but that didn’t work. The DIV element is new to me, but makes sense…was trying to put something inside the column that has more editing options, and this was it! Thank you

Only issue now is, it doesn’t seem very responsive. I know I can hide sections under certain break points, and I could perhaps design a similar section to show only for mobile and tablet…or what would you suggest?

Thanks so much Ruenel!

[tristup]

Hi @444media,

If the section is breaking in the smaller screens there might be the custom CSS is the reason behind that. In that case, I would suggest you create a different section for smaller screens.

Thanks

[444media]

OK…I’ll check if there is any custom CSS in the sections I might have left behind. But what Ruenel described for me to do above, with adding the DIV element to the column to achieve the look I wanted, if it’s just that, it shouldn’t break on smaller screens? It should adjust cleanly? Thanks Tristup

[tristup]

Hi @444media,

Please check if there is any other custom CSS added into the Page CSS, Global CSS, Appearance > Customize > Additional CSS or anywhere else. Please let us know if you faced the same issue even after removing the custom CSS.

Thanks