change coupon buttonsize and inputbox

I want to Change the Coupon buttonsize and Inputbox like the enclosed Picture when I choose the kassa.
The Inputbox schould be wider and the button should be smaller.
hope you can help me how I can do this.

my testsite is: agoshop.hochl-it.at

kindly regards.

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*increase coupon code size*/
input#coupon_code {
    width: 50% !important;
}

div.entry-content > div > form > table > tbody > tr:nth-child(2) > td > div > input.button{
  padding:3px;
  font-size:15px
}

Best Regards,
Support

Kindly regards for your answer.
It Looks o.k. but I want that the Inputbox should a Little bit wider.
When I use widht: 60% the button will move into the next line - see in the attached Picture.
May you can also solve this.
kindly regards

Hey there,

You can try reducing the font size of the button

div.entry-content > div > form > table > tbody > tr:nth-child(3) > td > div > font > font > font > font > input{
font-size:41%;
width: 60% !important;
}
Both button and input field are in the same div, so

kindly regards for your answer but nothing will be change.
May you have an other idea.
kindly regards

Hello there,

I hope you are doing well today.

Please remove the last CSS code and try using this set instead:

/*Widen coupon bar*/
input#coupon_code {
    width: 65% !important;
}

.coupon {
    display: flex;
}

input.button.btn.btn-default {
    float: right;
}


Best Regards,
Support

Hi!
I have Change the width to a fix px like:
input#coupon_code {
width: 180px !important;
font-size:11px;
}

then the Inputbox is bigger and will work.
kindly regards for your help

Hey there,

I’m happy you found a viable solution.

Let us know if there’s anything else we can assist you with.

Best Regards,
Support.