Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1164247

    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

    #1164449

    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

    #1164695

    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

    #1164838

    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

    #1164998

    Hello Yigit,

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

    Thank you!

    This ticket can close :-)
    Greg

    #1165004

    Hi,

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

    Best regards,
    Yigit

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.