Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 8, 2015 at 11:22 pm #549301
    dohodoho

    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.

    December 8, 2015 at 11:49 pm #549316
    Yigit

    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

    December 9, 2015 at 2:03 am #549378
    dohodoho

    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; }

    December 9, 2015 at 5:01 pm #549875
    Dake

    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

    December 9, 2015 at 5:15 pm #549880
    dohodoho

    Thanks! That did it.

    December 9, 2015 at 5:26 pm #549887
    Dake

    Hi!

    You’re welcome, glad we could help :)

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

    Regards,
    Dake

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