Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 22, 2021 at 7:39 pm #1333787
    AFEC

    Hello,

    I am attempting to replicate the design style of the quote boxes on this page: https://backlinko.com/ onto my homepage

    I got pretty far down field, but I think the last thing to do is apply some CSS to my quote text boxes to move them up, behind the profile images so they are centered on that line. Can you help me out with that?

    Link in private

    Thanks,
    Ryan

    December 23, 2021 at 12:41 pm #1333846
    Ismael

    Hey AFEC,

    Thank you for the inquiry.

    You have to apply a custom css class name to the columns that you would like to move up so that we can style them directly. The custom css class name field is located in the elements’ Advanced > Developer Settings panel. After applying a custom css class name (e.g “av-quote-block”) to the columns, you can use this css code to pull them upwards.

    .av-quote-block {
    margin-top: -80px;
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    December 23, 2021 at 5:28 pm #1333881
    AFEC
    This reply has been marked as private.
    December 24, 2021 at 6:20 am #1333925
    Rikard

    Hi,

    Thanks for the update. We’ll keep this thread open for you.

    Best regards,
    Rikard

    January 5, 2022 at 4:02 pm #1334389
    AFEC

    Thanks so much Ismael, that worked!

    Now how do I make the top layer cover the bottom layer? Here’s a screenshot of the issue: https://ibb.co/9YBkX00 – I’d like the pictures to cover the lines.

    Edit: 1 more thing – the edit does not apply to mobile versions. How do I create the same effect on mobile? https://ibb.co/QmFVCh6

    Thanks,
    Ryan

    • This reply was modified 2 years, 11 months ago by AFEC.
    January 6, 2022 at 6:07 am #1334479
    Ismael

    Hi,

    Glad to know that the css modification is working. Regarding the line issue, you may need to adjust the z-index or the stack order of the columns containing the round images.

    .avia-image-container.av-kxfiap0x-5bde008628666e18d31e1e51bf00782e.av-styling-.avia-align-center.avia-builder-el-13.el_after_av_hr.el_before_av_one_fifth {
    z-index: 100;
}

    Again, you can apply a custom css name to the element and use it instead of the generic selector above.

    How do I create the same effect on mobile? https://ibb.co/QmFVCh6

    You may need to use a more specific selector. Look for this css code..

    .homepage-two {
    margin-top: -100px;
}

    .. and replace it with.

    .responsive #top #wrap_all .homepage-two {
    margin-top: -100px;
}

    Best regards,
    Ismael

    January 6, 2022 at 2:46 pm #1334563
    AFEC

    Thanks.

    Regarding the line issue,

    I added:

    .avia-image-container.av-kxfiap0x-5bde008628666e18d31e1e51bf00782e.av-styling-.avia-align-center.avia-builder-el-13.el_after_av_hr.el_before_av_one_fifth {
    z-index: 100;
    }

    And it fixed the top image but not the bottom. If I understand correctly, you’re saying I can modify this code to apply to my specific CSS names (in my case homepage-one and homepage-two). Can you please provide an example? I had difficulty modifying the code.

    regarding the mobile issue
    I updated the CSS as suggested, and it did not fix the mobile issue. (However when testing from desktop and sliding my browser size to be thin to replicate mobile, it does work.)

    Thanks,
    Ryan

    January 7, 2022 at 5:36 am #1334640
    Ismael

    Hi,

    You have to apply the same class name (e.g “av-column-image-overlap”) to the columns containing the images and use it instead of the selector above. Example.

    .responsive #top .av-column-image-overlap {
    z-index: 100;
}

    We prepended the “.responsive #top” selector to the custom class name “av-column-image-overlap” make our selector more specific.

    Did you purge or remove browser history in your phone before checking the page? You should try checking it on incognito mode as well.

    Best regards,
    Ismael

    January 7, 2022 at 9:12 pm #1334723
    AFEC

    Nice! Both issues are resolved. The code you sent for the image overlap worked great, and the mobile issue was a caching issue. Thanks for the help!

    January 8, 2022 at 6:47 am #1334753
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 25, 2022 at 8:41 pm #1337167
    AFEC

    Thanks Rikard, you can close this!

    January 26, 2022 at 12:43 pm #1337258
    Rikard

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

    January 26, 2022 at 12:45 pm #1337260
    Rikard

    Hi again,

    Forgot to close :D

    Best regards,
    Rikard

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘How to move elements up and down to overlap them’ is closed to new replies.