WooCommerce checkout page not resizing for mobile-view

Resolved sunflowerimc
(@sunflowerimc)

3 years, 4 months ago

There are only 2 columns in my checkout table (1 for product name and 1 for subtotal). When checking out on mobile view, the subtotal column is so small it wraps the table data onto 2 lines. (“Subtotal” broken up in 2 lines as “Subt” + “otal” Is there any fix for this? Any help is greatly appreciated!

A photo of the issue here: https://ibb.co/WyXKxrk

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Branko
(@brankoconjic)

3 years, 4 months ago

Hey,

You website has a “Coming Soon” page so I can’t actually see the website.

Thread Starter sunflowerimc
(@sunflowerimc)

3 years, 4 months ago

Hey, I’m sorry I will remove the Coming Soon page now!
Branko
(@brankoconjic)

3 years, 4 months ago
@sunflowerimc,

Here’s a CSS code that will improve how the cart looks like on mobile devices:
```
@media screen and (max-width: 900px) {
.woocommerce .woocommerce-cart-form table.shop_table td { border: none !important; padding: 8px 0 !important; }

.woocommerce table.shop_table td:before { text-align: left; }

.woocommerce table.shop_table td.product-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
text-align: left !important;
  margin-bottom: 24px;
}

.woocommerce .actions .coupon {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.woocommerce .actions .coupon input {
  margin: 0 !important;
  width: 100% !important;
}
}
```
Add the CSS into the Additional CSS field in Appearance » Customize and let me know if that looks better.

If the updated cart looks good, I will include it with the next theme update.
- This reply was modified 3 years, 4 months ago by Branko.
Thread Starter sunflowerimc
(@sunflowerimc)

3 years, 4 months ago

Unfortunately the additional CSS did not work.
Here is what the “Your Cart” table still looks like:

https://ibb.co/K2bjj8V
Branko
(@brankoconjic)

3 years, 4 months ago
https://ibb.co/K2bjj8V

this link gives me a 404 page.
- This reply was modified 3 years, 4 months ago by Branko.
Thread Starter sunflowerimc
(@sunflowerimc)

3 years, 4 months ago

My apologies, not sure what happened with that one.

https://ibb.co/5nNJTPV
Branko
(@brankoconjic)

3 years, 4 months ago
Oh I’m sorry, the CSS I sent is for the Cart page not the Checkout.

You can try with this CSS:
```
.woocommerce .woocommerce-checkout-review-order table.shop_table thead th { white-space: nowrap }

.woocommerce table.shop_table td.product-name { margin: 0 !important }
```
Let me know if that worked.
Thread Starter sunflowerimc
(@sunflowerimc)

3 years, 4 months ago

Yes!! Thank you so much this is amazing!

Branko
(@brankoconjic)

3 years, 4 months ago

I’m glad I could help 🙂

If you have a minute of your time, please leave a 5-star review for the Sinatra theme: https://wordpress.org/support/theme/sinatra/reviews/#new-post

Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘WooCommerce checkout page not resizing for mobile-view’ is closed to new replies.

Tags