Checkout responsive problems

[nikolaus_k]

Hi my checkout is kind of a mess when its responsive.

This is my costum CSS for the checkout:

div#customer_details {
margin-right: 4%;
}
div#customer_details, #order_review {
width: 48%;
float: left;
}
h3#order_review_heading {
margin-top: 0; /* To align header*/
}

.woocommerce-checkout form input[type=“checkbox”] {
margin-left: 0px;
}

@media only screen and (max-width: 800px) {
.woocommerce-checkout div#customer_details {
width:100%;
float:none;
margin: 0;
}
.woocommerce-checkout div#order_review {clear:both;width:100%; float:none;}
.woocommerce-checkout .woocommerce-checkout form h3#order_review_heading {
margin-top: 0;
}
}

In responsive the first field Anrede (Title) is too large and the second column is too small.
Can I change credit card field in 2 so the numbers of the card don´t cross with the securty code or the expiration date?

Any ideas?

[rad]

Hi @nikolaus.kemetner,

Thanks for reaching out.

The first screenshot is because the element has 700px static width. Please add this CSS as well

.woocommerce .select2-container {
width: 100% !important;
} 

As for the second screenshot, you have this CSS

div#customer_details, #order_review {
width: 48%;
float: left;
}

But you never included it in @media to reset it back to 100%. This should do

@media only screen and (max-width: 800px) {
.woocommerce-checkout div#customer_details,
div#customer_details, #order_review {
width:100%;
float:none;
margin: 0;
}

...
..
.

If you have further design customization, I recommend contacting a developer as they may able to fully help you. We can’t provide further customization especially if it’s not related to the theme and its bundled plugin.

Thanks!