Width of WooCommerce

[ Moderator note: moved to Fixing WordPress. ]

Hello everyone,

I hope someone can help me.

The site: https://everlasting-rz.com/zen/shop/donate/

I think the ”issue” is obvious, it’s the width.

The code is:

.woocommerce form .form-row {
width: 100%;
}
.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
width: 100%;
padding: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
width: 60%;
height: 20px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: left;
width: 80%;
}
.custom-checkout h3 {
background-color: #165f1c;
width: 45%;
text-align: center;
padding: 10px;
border-radius: 5px;
margin-top: 30px;
color: #FFF;
float: right;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
padding: .6180469716em;
background-color: #f2f2f2;
color: #43454b;
outline: 0;
border: 0;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
font-weight: 200;
border:solid 2px #e4e4e4;
}

#wc_checkout_add_ons {
width: 45%;
float: right;
text-align: center;
}

@media screen and (min-width: 600px) {
.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {width:60%;}
.woocommerce .col2-set, .woocommerce-page .col2-set {
width: 45%;
float: left;
}
.woocommerce-checkout-review-order{
width: 45%;
float: right;
}
}
@media screen and (max-width: 600px) {
.custom-checkout h3 {
width: 60%;

}
}

Thanks in advance
Annie

• This topic was modified 9 years ago by Jan Dembowski.
• This topic was modified 9 years ago by Jose Castaneda. Reason: Fixed CSS by using backticks for code