Woocommerce checkout form not responsive on mobile and alignment issues - Support

Tagged: alignment, responsive, woocommerce

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
August 17, 2020 at 8:31 pm #1238614
Morticka
Participant
Hi guys,

I have removed some unnecessary fields in woocommerce with php.

When you go to the checkout form, the Product information box now overlaps the “Your order” heading. The payment box is cutoff on the bottom.

The checkout form on mobile is a mess too. The two columns display next to each other (1) in portrait mode, but there is not enough room for that on mobile. The landscape mode looks great, but with both modes the payment information is even more cutoff. (2 & 3)

This is the code you guys helped me with a while ago to style the checkout page:
```
/* Styling woocommerce checkout */
.col2-set .col-2 {
    float: none !important; 
}
#order_review, #order_review_heading {
    clear: both !important; 
    width: 40% !important; 
    float: right !important; 
}
#order_review {
    position: absolute;
    top: 11.5%;
    right: 0;
}
#order_review_heading {
    position: absolute;
    top: 6.8 %;
    right: 0;
}
#top .checkout .col-1, #top .checkout .col-2 {
    clear: both !important; 
    width: 100% !important; 
}
#customer_details {
    width: 40% !important; 
    float: left !important; 
    clear: both !important; 
}
```
I’ve tried multiple CSS fixes until my head exploded. I’m missing something, but I can’t figure out what.

My question: How do I create more room for the checkout page on desktop and make it responsive on mobile without anything being cutoff? :)

Sincerely,
Morticka
August 27, 2020 at 8:35 am #1241120
Ismael
Moderator
Hey Morticka,

Sorry for the delay. You should wrap the code inside a css media query so that it will only affect the desktop view and keep the default style or layout on mobile view.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}
```
Place the previous code inside the css media query above.

Best regards,
Ismael
September 3, 2020 at 3:40 pm #1243130

Morticka
Participant

Thx Ismael, that worked.

Do you have a solution for my other alignment problem? “When you go to the checkout form, the Product information box now overlaps the “Your order” heading. ”

Sincerely,
Morticka

September 8, 2020 at 7:03 am #1244174
Ismael
Moderator
Hi,

Glad it worked. Try to add a margin above the order_review container to keep it from overlapping with the heading.
```
#order_review {
	position: absolute;
	top: 11.5%;
	right: 0;
	margin-top: 20px;
}
```
Best regards,
Ismael
September 8, 2020 at 12:49 pm #1244276
Morticka
Participant
Hi Ismael,

Great, it works perfectly on desktop! :D

But on mobile, the price and payment option overlaps the billing information.

Question: How can I make sure the checkout form is completely visible on mobile?

This is the code I tried but this did not work:
```
@media only screen and (max-width: 767px) {
#order_review {
	position: absolute;
	top: 11.5%;
	right: 0;
	margin-top: 20px;
}
}
```
Thanks.

Sincerely,
Morticka
September 10, 2020 at 6:59 am #1244757
Ismael
Moderator
Hi,

But on mobile, the price and payment option overlaps the billing information.

We might have to include that css inside the css media query that we recently created for desktop view.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}
```
This is the code I tried but this did not work:

That css media query will only affect the mobile view. We have to replace (max-width: 767px) with (min-width: 768px) so that it works on desktop view, or just include the latest css code in the desktop css media query that we created previously.

Thank you for your patience.

Best regards,
Ismael
September 14, 2020 at 11:24 am #1245716

Morticka
Participant

Hi Ismael,

Thank you very much and ofcourse! (Sorry, I had been working for 12 hours straight, missed that one.)

It looks great now, except on desktop, where there is still no room at the bottom of the checkout form. I put a content section beneath the checkout shortcode on the page, but it seems to only work on mobile.

How can I get more room at the bottom of the checkout form on desktop? Screenshot in private content.

Sincerely,
Morticka

September 16, 2020 at 5:21 am #1246150
Ismael
Moderator
Hi,

Glad it’s working. We could add a margin to the bottom of the checkout form to prevent the order review container from touching the footer.
```
#top .woocommerce-checkout::after {
    content: '';
    overflow: auto;
    content: "";
    display: table;
    clear: both;
}

#top .woocommerce-checkout {
    margin-bottom: 100px;
}
```
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks! May the force be with you.

Best regards,
Ismael
September 16, 2020 at 9:12 am #1246230

Morticka
Participant

Hi Ismael,

Unfortunately it did not work, do you have another solution?

(And I asked for a solution for this problem in the first ticket I started a month ago, I even included a screenshot? So this is not a new question :) )

Sincerely,
Morticka

September 18, 2020 at 8:11 am #1246691

Ismael
Moderator

Hey!

Thank you for the update.

We did not notice that the forum automatically converted the selector woocommerce to a link, so the css code broke. We adjusted it a bit. Please try the css code again and make sure to purge the cache and remove the browser history. Let us know how it goes.

Regards,
Ismael

September 18, 2020 at 11:20 am #1246736

Morticka
Participant

~~Where did you adjust it a bit?~~

In the mean time I removed the links myself and everything works! Thx Ismael. You can close this ticket.

Sincerely,
Morticka

September 21, 2020 at 7:42 am #1247268

Ismael
Moderator

Hi,

You’re very welcome! We’ll close this thread now. Please feel free to open another if you need anything else.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Woocommerce checkout form not responsive on mobile and alignment issues’ is closed to new replies.