responsive shopping cart

  • Posts: 47
  • Thank you received: 4
7 years 7 months ago #267729

-- 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.

  • Posts: 82868
  • Thank you received: 13376
  • MODERATOR
7 years 7 months ago #267752

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:

@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.

  • Posts: 47
  • Thank you received: 4
7 years 7 months ago #267806

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.

  • Posts: 82868
  • Thank you received: 13376
  • MODERATOR
7 years 7 months ago #267813

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.

  • Posts: 20
  • Thank you received: 2
  • Hikashop Business
7 years 5 months ago #272643

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....B)

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

On a desktop or laptop the cart displays perfectly.

Regards,
Jason.

Attachments:

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

  • Posts: 20
  • Thank you received: 2
  • Hikashop Business
7 years 5 months ago #272645

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.

Attachments:

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

  • Posts: 6
  • Thank you received: 0
7 years 3 months ago #275008

Where do we put this code...is it template.css

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

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
7 years 3 months ago #275024

www.hikashop.com/support/documentation/1...the-display.html#css

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

Time to create page: 0.087 seconds
Powered by Kunena Forum