Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 8, 2023 at 4:43 pm #1415834
    Monika

    Hey There,

    i have some challenges with understanding how the Z index works in enfold perhaps you can help me understand whats going on there.

    You see it in mobile version (see link).. i want these two Badges to be on the top, but they hide behind the previous section even tough i gave this Color Section a Z index of 999!
    How is that possible that the color section above this is higher than 999?

    August 8, 2023 at 4:46 pm #1415835
    Monika

    I hope you can help me out with this, it makes me confused :D

    For further Layout building perhaps you can also tell me if this is right:

    If I want a Color Section overlap the previous, normally It is not neccessary to give it a new Z-Index because it it automatically above this previous section, right?

    And if I use Color Section ID’s, then also every new Color Section I give that same ID, it is above the previous?

    Cheers and thank you!
    Monika

    August 9, 2023 at 3:03 am #1415878
    Ismael

    Hi,

    Thank you for the inquiry.

    Looks like you managed to fix the issue with the following css code.

    .avia-section.av-lhutmbba-1d3851780f560bdf6198d52369180da4 {
    z-index: 999;
}

.avia-section.av-lhutmbba-1d3851780f560bdf6198d52369180da4 {
    position: relative;
}

    Let us know if you need further assistance.

    Best regards,
    Ismael

    August 10, 2023 at 4:14 pm #1415998
    Monika

    Hey Ismael,

    thanks for your answer.

    I tried to fix it with the settings in the Color section but it does not work.
    Mobile the Problem is still there .. :/

    Do you know whats going on there and why it does not work?

    August 11, 2023 at 9:09 am #1416031
    Ismael

    Hi,

    Thank you for the update.

    We can’t reproduce the issue on mobile view anymore as shown in the screenshot below. The css code above should be enough to place the section above the others. Which settings did you adjust in the color section element?

    Best regards,
    Ismael

    August 11, 2023 at 2:21 pm #1416077
    Monika

    Thank you Ismael,

    strange.. I have no Idea why I still see the Problem..
    Perhaps the Cache..
    I will check on different mobiles.

    August 13, 2023 at 8:52 pm #1416201
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #av-extra-columns > .av-section-cont-open {
    margin-top: 80px;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.