-
Posts
-
I’m trying to achieve something similar to this effect: http://vaology.com/alison/wp-content/uploads/2019/06/overlap-1.png.
I have tried creating 2 columns and using .custom-class { position: relative; right: -150px; }, but I need one section to overlap the other. I would also like them to align in the middle.
Is this possible? Am I using the wrong approach?
Thank you for your help!
Hey vaology,
It looks very close to your design, just reduce the top margin a bit:
.flex_column.av_one_half.flex_column_div.first.avia-builder-el-5.el_after_av_section.el_before_av_one_half.avia-builder-el-first.home2 { z-index: 99999999; margin-top: 7%; }Best regards,
VictoriaThis worked perfectly – thank you!
I’ve tried making this work for the opposite layout – with a smaller text area on the right overlapping a larger photo in the back on the left, but I can’t get it.
Here’s what I tried – can you help me understand what I’m doing wrong?
Hi vaology,
I am not sure I understand the last question or there’s something missing after it. Please, explain a bit more.
Best regards,
VictoriaSorry Victoria –
Here is what I’m trying to accomplish.
http://vaology.com/alison/wp-content/uploads/2019/07/Screen-Shot-2019-07-03-at-1.34.15-AM.png
http://vaology.com/alison/about/ < I would like the dark teal/blue text square to overlap the family photo.
It’s like this one, but flipped. > http://vaology.com/alison/
Hi vaology,
https://cl.ly/c61fc07ceb73 Something like this?
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:1024px){ .page.page-id-32 #after_section_1 .flex_column.av_one_half.avia-builder-el-6 { left: -5vw; top: 60px; margin-left: 0; } .page.page-id-32 #after_section_1 .container { max-width: 990px; } }If you need further assistance please let us know.
Best regards,
Victoria
- The topic ‘Overlap Columns/Elements’ is closed to new replies.