Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 6, 2020 at 4:04 pm #1258892
    sensiblekaren

    Hello

    Been trying CSS to get the button a promobox to be round – a circle – but keeps ending up oval and offset?

    Please can you advise on the CSS to make this button a circle.

    Thank you.

    November 6, 2020 at 4:11 pm #1258895
    Yigit

    Hi,

    Please edit your Promo Box element and give it a unique ID (“custom-promo” in example below) and then add following code to Quick CSS in Enfold theme options > General Styling and adjust the values as needed 

    #top #custom-promo .avia-button {
    border-radius: 100%;
    min-height: 140px;
    padding: 60px 0;
}

    Cheers!
    Yigit

    November 6, 2020 at 4:28 pm #1258901
    sensiblekaren

    Thank you … am getting there but now it gets cut off – I have sent a screen shot – I need the circle to be smaller and central on the promo bar. Please can you advise further on which bits to tweak.

    November 6, 2020 at 4:32 pm #1258905
    Yigit

    Hi,

    Can you please post a link to your page so we can provide you an accurate solution?

    Best regards,
    Yigit

    November 6, 2020 at 4:37 pm #1258909
    sensiblekaren

    It was in draft have quickly published it so you can see… thank you for replying so quickly!

    November 6, 2020 at 4:42 pm #1258912
    Yigit

    Hi,

    Please change the code to following one

    #top #custom-promo .avia-button {
    border-radius: 100%;
    min-height: 90px;
    padding: 60px 0;
    top: 0;
}
.av_promobox#custom-promo {
    padding: 30px;
}

    Best regards,
    Yigit

    November 6, 2020 at 4:46 pm #1258913
    sensiblekaren

    Thank you! However it is still cut off at the top?

    November 6, 2020 at 5:01 pm #1258915
    Yigit

    Hi,

    Sorry, please change the code to following one :)

    #top #custom-promo .avia-button {
    border-radius: 100%;
    min-height: 90px;
    padding: 60px 0;
    top: 0;
    margin-top: 0;
}
.av_promobox#custom-promo {
    padding: 30px;
}

    Best regards,
    Yigit

    November 6, 2020 at 5:13 pm #1258920
    sensiblekaren

    Thank you. On a mobile and tablet it needs to stay central as a circle – it goes large and oval – is there a way to fix that?

    November 6, 2020 at 5:29 pm #1258922
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
#top #custom-promo .avia-button {
    max-width: 90px;
    margin: auto;
}}

    Best regards,
    Yigit

    November 6, 2020 at 5:40 pm #1258926
    sensiblekaren

    Thank you – amazing – all sorted. Really appreciate it.

    November 6, 2020 at 6:48 pm #1258940
    Victoria

    Hi sensiblekaren,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘round button on promo box’ is closed to new replies.