Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 10, 2019 at 12:43 am #1164247
    Donkies11

    Hello Support,

    We just experienced an issue with our three “Promo Box” elements on a homepage.
    There is a “Color Section” element creating a slight grey background. Within that element, are three 1/3 Column elements.
    Within each is a Promo Box element.

    • Promo Box Button = yes
    • Button Link? = post
    • Custom Button Colors

    We’ve been using this set-up for over a year. Just in the last few days, something changed… the “hot spot” for the link of the buttons is way off from the actual buttons.
    It looks like it has to do with one of these two classes: .avia-button-wrap and/or .avia-button-right .

    I checked some other posts in the forum – it is not an empty <p> tag issue. I am not seeing CSS relating to those two classes.

    I’ve posted the link to the homepage and User Admin credentials into the Private Content.

    Can you help fix this new issue?

    ~ Greg

    December 10, 2019 at 3:19 pm #1164449
    Yigit

    Hey Greg,

    Issue seems to be related to following custom CSS code you have 

    .av_promobox .avia-button.avia-size-medium {
    margin-top: -19px;
}
.av_promobox .avia-button {
    right: 30px;
    top: 50%;
    position: absolute;
    z-index: 2;
}

    Could you please let us know why you needed to add the code so maybe we can offer another solution? :)

    Best regards,
    Yigit

    December 11, 2019 at 2:57 am #1164695
    Donkies11

    Hello Yigit,

    There are at least two other developers involved with this site; I am not going to be able to find out why that code was originally placed.
    I looked to track down the original source of the CSS code you specified and I’ve been unable to.

    There is a plugin, BWP Minify, which is making it difficult to see the true source of the code you’ve called out.

    Is there a way we can just target those three buttons and create a fix via CSS?

    Sincerely,
    Greg

    December 11, 2019 at 3:09 pm #1164838
    Yigit

    Hi Greg,

    Solution was actually pretty simple. I edited the Color Section and gave it a unique ID “home-section” and then added following code to the bottom of Quick CSS field

    /* Fix for homepage buttons */ 
#home-section .av_promobox .avia-button.avia-size-medium {
    z-index: 9;
}

    Please review your website :)

    Best regards,
    Yigit

    December 11, 2019 at 9:34 pm #1164998
    Donkies11

    Hello Yigit,

    Wow – the “z index” never even came to mind as an issue/solution…

    Thank you!

    This ticket can close :-)
    Greg

    December 11, 2019 at 10:15 pm #1165004
    Yigit

    Hi,

    You are welcome Greg! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Promo Box inside Color Section with Promo Box Button’ is closed to new replies.