Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #859329

    Hi,
    I have images in an area where 2 layout sections overlap (I’m using a negative top margin on the lower section).

    #peopleoverlap {
    margin-top: -250px;
    }

    In the part of the images where the sections overlap the link is not active. I have tried bringing the image section forward using z-index but this does not solve the problem.
    How can I target the image so that the whole picture area is an active link?

    Many thanks, I hope you can help!
    and thanks for your help yesterday.

    #859800

    Hey Fionadee,

    It is a z-index issue but in that case, we would recommend you to remove bottom pointing arrow from your color section.

    Best regards,
    Yigit

    #860139

    Thanks for getting back to me.

    I have removed the down arrow but I still have the same issue. I have also tried adding an id to the top section and a z-index of 1000:

    #dwoverlap1 {
    z-index:1000; !important;
    }

    and this to target the images :

    #dwoverlap .avia-image-container-inner
    {
    z-index:1000; !important;
    }

    without success.

    This might help explain:

    A diagram to clarify the problem

    Many thanks!

    • This reply was modified 1 month, 2 weeks ago by  Fionadee.
    #860141

    Sorry my diagram makes it look like the z-index is applied to the bottom section. I am obviously trying to target the top section containing the images.

    #861369

    Hi,
    Try:

    .avia-builder-el-6.avia-image-container-inner, .avia-builder-el-8.avia-image-container-inner{z-index:1000 !important;}

    I would also suggest changing your negative margin as in my screen resolution (1536 x 864) the yellow circles will overlap the people.
    please see screenshot in Private Content area

    Best regards,
    Mike

    #863466

    This code does not seem to solve the problem either – I will try looking for a different design solution.
    Many thanks for the reply and for pointing out problem in your screenshot.

    #863473

    I think I’ve found a solution to the overlap problem – I reduced the z-index of the bottom section to zero and now the link seems fine.
    (Purchase code hidden if logged out) -at-15.06.15.png” alt=”” />

    Now I need to sort out the other problem shown in Mike’s screenshot …

    • This reply was modified 1 month, 1 week ago by  Fionadee.
    #863998

    Hi Fionadee,

    The page is password-protected, even when I logged in to the dashboard I could not preview the page. Can you post the password, please.

    Best regards,
    Victoria

    #864070

    Hi Victoria,
    The password is below. I have adjusted the design since I posted yesterday, as the job is still in progress, removing some of the negative margins. All seems to be OK now.
    Yigit’s original advice that this is a z-index issue was correct, so my diagram is probably stating the obvious! What wasn’t so obvious to me at the time was that 1000px wasn’t enough to bring the element to the front – I needed to send the other element to the back.
    Thanks again to MIke for pointing out the overlap problem which did not show on my Mac, I now have PC laptop open to check each stage!

    #864269

    Hi,
    How about this solution, we’ll make the blue circle element 200px x 200px and move it into place using right negative percentage and leave the z-index alone so it’s on top. By making the element smaller it won’t interior with the yellow circles.
    But for the mobile view we will need to move it down as it stacks on top of the yellow circle.

    .page-id-14 .avia-builder-el-8 {width: 200px!important; right: -35%!important; }
    @media only screen and (max-width: 766px) {.page-id-14 .avia-builder-el-8 { margin-top: 0px!important; }}

    Note that I used the page ID so it will only work on this one page.
    please see screenshots in Private Content area, Hope this helps.

    Best regards,
    Mike

    #864783

    Thanks Mike,
    Fantastic, just what I needed!

    #864793

    Hi,

    Glad Mike could help! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

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

The topic ‘Image link not active in area of negative margin’ is closed to new replies.