responsive shopping cart

iwallace
Topic Author
Offline

9 years 6 months ago #267729 by iwallace

responsive shopping cart was created by iwallace

-- url of the page with the problem -- : kuruvita.com.au/index.php/shop-categories-listing/checkout
-- HikaShop version -- : 3.0.1
-- Joomla version -- : 3.6.5

Hi Hikashop,
I have built a store for my client and i am happy with the way it responds in mobile devices except for the shopping cart screens

am i missing a setting to make the shopping cart responsive? it looks awful and although i have addes quire a bit of CSS to the site - i have not done much to the shopping cart at all and it looks like a MAJOR challenge to look usable in a device screen less than 600px

can you advise please

;-)

Please Log in or Create an account to join the conversation.

nicolas
Away

9 years 6 months ago #267752 by nicolas

Replied by nicolas on topic responsive shopping cart

Hi,

You're missing the responsive CSS for the cart display on the checkout.
Add it on your website CSS and it should look better:

Code:

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	.hikashop_checkout_cart table,
	.hikashop_checkout_cart table thead,
	.hikashop_checkout_cart table tbody,
	.hikashop_checkout_cart table thead th,
	.hikashop_checkout_cart table tbody td,
	.hikashop_checkout_cart table thead tr,
	.hikashop_checkout_cart table tbody tr {
		display: block;
	}
	.hikashop_checkout_cart table tfoot tr,
	.hikashop_checkout_cart table tfoot td,
	.hikashop_checkout_cart table tfoot {
		display: block;
	}
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_total2_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_shipping_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_final_total_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_coupon_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_tax_title,
	.hikashop_checkout_cart table tbody td#hikashop_checkout_cart_payment_title,
	.hikashop_checkout_cart table tbody td.hikashop_cart_additional_title {
		display: none !important;
	}
	.hikashop_checkout_cart_final_total_title { display:none; }
	.hikashop_checkout_cart table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.hikashop_checkout_cart table tr { border: 1px solid #ccc; }
	.hikashop_checkout_cart table tr.margin { border: 0px solid #ccc; }
	.hikashop_checkout_cart table td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 30%;
	}
	.hikashop_checkout_cart td.hikashop_cart_product_name_value {width: 64%}
	.hikashop_checkout_cart table td:before {
		position: absolute;
		left: 6px;
		padding-right: 10px;
	}
	.hikashop_checkout_cart table td.hikashop_cart_product_quantity_value:before { padding-top:3px }
	.hikashop_checkout_cart table td:before { content: attr(data-title); font-weight: bold; }
	.hikashop_checkout_cart .hikashop_product_price_full {
		text-align: left;
		min-height: 20px;
		padding-left: 20px;
		padding-top: 3px;
		display: inline !important;
	}
	.hikashop_checkout_cart .hikashop_product_quantity_field { margin: 0px 16px 0px 20px !important; }
	.hikashop_checkout_cart a span.hikashop_product_variant_subname img { margin-left: 10px; display: block; margin-top: 5px; }
	.hikashop_checkout_cart td.hikashop_cart_product_price_value span.visible-phone { margin-left: 5px; display:inline !important}
	.hikashop_checkout_cart tbody tr td.hikashop_cart_empty_footer { display: none !important }
}

Please Log in or Create an account to join the conversation.

iwallace
Topic Author
Offline

9 years 6 months ago #267806 by iwallace

Replied by iwallace on topic responsive shopping cart

Hi nicolas
thanks for your time.

i have added the code and im not sure that it has made a difference at all?

i added it to the end of my custom css file

any other suggestions

thanks

;-)

Please Log in or Create an account to join the conversation.

nicolas
Away

9 years 6 months ago #267813 by nicolas

Replied by nicolas on topic responsive shopping cart

Hi,

It does as far as I can see, and if you remove that CSS:
.list-striped td, .table-striped td {
padding: 10px 20px !important;
}
from your template, then it displays just great:
monosnap.com/file/ydbRJ80hR9biEaGGPiYs0UQkA78bWy

Please Log in or Create an account to join the conversation.

Precisionaeroproducts
Offline

9 years 3 months ago #272643 by Precisionaeroproducts

Replied by Precisionaeroproducts on topic responsive shopping cart

Hi Nicholas,

I have a similar problem with my shopping cart. On a mobile device it reorders the columns of the cart vertically with text over the top of each other. Should the CSS change noted above be done to fix this?
I've not played with CSS so could you tell me which file in the template to modify? Thought it wise to ask before screwing something up....

I'm using purityiii and my site address is precisionaeroproducts.com.au

On a desktop or laptop the cart displays perfectly.

Regards,
Jason.

Please Log in or Create an account to join the conversation.

Precisionaeroproducts
Offline

9 years 3 months ago #272645 by Precisionaeroproducts

Replied by Precisionaeroproducts on topic responsive shopping cart

I found another thread www.hikashop.com/support/forum/checkout/...n-mobile.html#272253
Which fixed my display issue perfectly by making the padding important.

Excellent!

Cheers,
Jason.