[tparkmediaParticipant]

http://www.desqtopappraisals.com

Hello,

I would like to change the styling for the coupon “APPLY” button. Need some help with CSS.

1. I would like the button height size to be same size as the coupon input box.

2. I would like to keep the button always adjacent to the input box, even in media view. https://snag.gy/Z3KMLa.jpg

Thanks in advance!

[Rue NelModerator]

Hello There,

Thanks for writing in!

#1] To change the button height to be the same as the coupon input box, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.gform_wrapper input#gf_coupon_button.button {
    padding: 5px 10px;
}

#2] And to keep the button always adjacent to the input box, please add the following css code at the bottom of other css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
    .gform_wrapper input.gf_coupon_code {
        max-width: 160px;
    }
}

We would loved to know if this has work for you. Thank you.

[tparkmediaParticipant]

That worked great!

Couple more things please, just to fine tune it.

1. Change the font size for the “APPLY” text

2. At 641px the box size changes making the APPLY box slightly bigger. What can I do to keep it consistent?

Thanks again!!

[Rue NelModerator]

Hello There,

Thanks for updating in!

1] To change the font size, please update the code and use this:

.gform_wrapper input#gf_coupon_button.button {
    padding: 5px 10px;
    font-size: 14px;
}

2] And to change the box size, please use this:

@media(max-width: 767px){
    .gform_wrapper input.gf_coupon_code {
        max-width: 120px;
    }
}

Feel free to change the number that may apply to your site.

Hope this helps.

[tparkmediaParticipant]

Changed some numbers around and got it to look the way I want, with your help.

Thanks a lot!

[RupokMember]

Glad that you are all set now. Have a nice day!

[Author]

Posts