Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1113948

    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!

    #1114231

    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,
    Victoria

    #1114406

    This 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?

    #1114514

    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,
    Victoria

    #1115414

    Sorry 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

    #1115583

    Hi vaology,

    Do you have the block somewhere on the website?

    Best regards,
    Victoria

    #1116838

    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/

    #1117131

    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

    #1117719

    Thank you!

    #1117790

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Overlap Columns/Elements’ is closed to new replies.