Checkout cart not responsive below 425px screen width (mobile)

Hi @amcookie

Thanks for the webpage link. I have checked it and yes it is cutting a little bit on edges.

There are two ways to handle this.

1) We can make the table wrap div scroll able. Most of people do this to make table responsive.

Please add below CSS snippet to WordPress Appearance > Customizer > Custom CSS section or your theme / child theme style.css

#edd_checkout_cart_wrap{overflow: auto;}

2) OR use the below CSS to hide the last action row from table in mobile device.

@media only screen and (max-width: 640px) {
	table#edd_checkout_cart .edd_cart_actions{display:none;}
}

I recommend you to go with step 1. You can take a look at both the option and keep the one you like. I hope this will help you.

Hi @pratik-jain,

I appreciate your help, but I’m afraid these aren’t really the types of solution I’m looking for, as an overflowing element leads to a poor user experience and they should also always have the option to remove items from their cart.

I also had to CSS my way around the fact that the total price is displayed outside of the viewscreen. I have enough experience with CSS to handle that, but less-experienced website owners may have more difficulty.

I’m honestly surprised that EDD used an html table for this element since they’re notoriously unresponsive. Do they not want to address this with a plugin update? I’ve seen other users with the same issue as far back as 2-3 years and nobody was ever given a solution.

Thanks again for your suggestions. I’ll keep working on it.

So, here’s my current workaround. It’s more CSS, but the end result is cleaner and more user friendly imo. This should work with multiple items in the cart as well.

@media only screen and (max-width: 425px) {

	table * {
		display: block !important;
		text-align: left !important;
	}
	td {
		padding: 10px !important;
		border-bottom: none !important;
	}
	th {
		padding: 10px !important;
	}
	.edd_cart_item:nth-of-type(even) {
		background-color: whitesmoke;
	}
	.edd_cart_header_row {
		display: none !important;
	}
	td.edd_cart_item_name:before {
		content: "Item Name: ";
		font-weight: 700;
	}
	td.edd_cart_item_price:before {
		content: "Price: ";
		font-weight: 700;
	} 
	.edd_cart_remove_item_btn {
		margin: 0px !important;
	}
	#edd-save-cart-button {
		text-align: center !important;
		text-decoration: none;
	}
	.edd_cart_discount:before {
		content: "Discount: ";
		font-weight: 700;
	}
}

• This reply was modified 4 years, 5 months ago by MrCookie.
• This reply was modified 4 years, 5 months ago by MrCookie.

Hi @amcookie

Glad to know that your problem has been solved.

Please mark this topic as resolved for other user experience ??