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

    Hi, I have the following custom CSS code for the very large buttons.

    .avia-button.avia-size-x-large { font-size: 18px; border-radius: 8px; padding: 20px 40px 18px; }

    This works fine except for the padding which is somehow ignored. The padding is reset to “25px 50px 23px;” when I look at it in the Chrome Inspection function.

    Any clue?

    I just want to make the very large button a little smaller.

    #549316

    Hi dohodoho!

    Please try adding !important rule to your code as following

    .avia-button.avia-size-x-large { font-size: 18px; border-radius: 8px; padding: 20px 40px 18px !important; }

    Best regards,
    Yigit

    #549378

    Now it runs against the min-width I think. At least editing min-width to 120 px (instead of 200px as is default) makes it work in Chrome Inspector.

    But the CSS below does not work. Also if I try to add an “!important” to the min-width tag.

    .avia-button.avia-size-x-large { font-size: 18px; border-radius: 8px; min-width: 120px; padding: 20px 40px 18px !important; }

    #549875

    Hey!

    Try the following adjustment instead:

    .avia-button.avia-size-x-large { 
    font-size: 18px; 
    border-radius: 8px; 
    min-width: 120px !important; 
    padding: 20px 8px 18px !important; 
    }

    The second padding value needed to be reduced.

    Best regards,
    Dake

    #549880

    Thanks! That did it.

    #549887

    Hi!

    You’re welcome, glad we could help :)

    Please let us know if you ever need any help in the future.

    Regards,
    Dake

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Button padding in custom CSS not working’ is closed to new replies.