Column width in Woocommerce form

[untypical]

Hi, I’m not sure if you can help me here. I am using Woocommerce on an X-Theme site (not X Pro) and have got to the stage where I am gathering some information to go on a gift voucher (using the voucher add on).

The width of the message field is 2 rows high and 5 columns wide which looks silly. I cannot work out the CSS to make the Recipient and Message fields wider (i.e. more characters / columns wide). See attached

I have also captured the relevant sections of the source code and attached that too.

Any advice will be gratefully received

Cheers
Neil

[christopher]

Hi there,

This question is about a 3rd party plugin generated code which is not related to our theme and unfortunately outside of our support scope. But we will do our best to suggest you proper code for the starter so that then you can follow up the case yourself.

Would you please kindly get back to us with the exact URL of the page which has the voucher code to follow up? Having only the screenshot of the code is not helping as we need to check the code live in our browser console to be able to suggest you proper CSS code.

Thank you for your understanding.

[untypical]

Thank you … understand the consraints.

The URL is https://www.bodygen.com.au/product/bodygen-body-composition-scan-and-full-consultation/

I would like the Recipient Name and Message fields to be wider and the same width as each other.

Thanks very much
Neil

[christopher]

Hi there,

Thank you for the URL now I see what section you mean. I thought it would be cool if those 2 sections go side by side. So I suggest that you add the code below to X > Launch > Options > CSS:

.voucher-fields > p {
    width: 48%;
    float: left;
    margin-right: 2%
}

.voucher-fields > p input,
.voucher-fields > p textarea {
    width: 100%;
}

.voucher-image-options {
        clear: both;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

But if you prefer otherwise we will be happy to give you the code if you give us instructions on how you want them to laid out.

Also, I suggest that you consider using the cool tool below to be able to detect the proper selectors to use in CSS:

And here is a starter guide to CSS if you are interested:
w3schools.com/css/

Thank you.

[untypical]

That is EXACTLY what I needed. Thank you so much, Christopher

[christian]

You’re welcome.