WooCommerce checkout page not resizing for mobile-view

Hey,

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

Hey, I’m sorry I will remove the Coming Soon page now!

@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 ago by Branko.

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

https://ibb.co/K2bjj8V

https://ibb.co/K2bjj8V

this link gives me a 404 page.

• This reply was modified 3 years ago by Branko.

My apologies, not sure what happened with that one.

https://ibb.co/5nNJTPV

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.

Yes!! Thank you so much this is amazing!

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://www.ads-software.com/support/theme/sinatra/reviews/#new-post

Thanks!