Checkout table unresponsive on mobile

  • Posts: 75
  • Thank you received: 1
8 years 10 months ago #225459

-- HikaShop version -- : 2.6.0 Business
-- Joomla version -- : 3.4.8
-- PHP version -- : 5.5
-- Browser(s) name and version -- : Chrome 36.0.1985

Hi. Having read many threads about the checkout table being unresponsive on mobile screens I'm still unable to fix the view on my website. I've checked to see if there are any other CSS settings interfering with the display but doesn't appear to be the case.

I've tried hiding data columns, specifying width, and others without success. Can you please help. Happy to provide admin credentials if necessary. Thanks.

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

  • Posts: 82907
  • Thank you received: 13378
  • MODERATOR
8 years 10 months ago #225524

Hi,

Apparently, you're missing the CSS that has been added in a previous release of HikaShop in order to support the responsiveness of the cart on the checkout.
But I can't check that for sure as your CSS is optimized by a third party extension and thus impossible to analyze.
Could you deactivate the optimization of the CSS ?

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

  • Posts: 75
  • Thank you received: 1
8 years 10 months ago #225554

Hi Nicolas.

Thanks for that. Can you check my back up site please where I've disabled the optimisation plugin. Site url is as before, therefore:

www.backup.xxx.co.nz

Regards, Mike

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

  • Posts: 82907
  • Thank you received: 13378
  • MODERATOR
8 years 10 months ago #225586

Hi,

So yes, if you look the frontend CSS of HikaShop you're using, you're using the one from HikaShop 2.3.2:
www.backup.xxx.nz/media/com_hikashop/css/frontend_custom.css
It doesn't have the CSS code for the responsive cart in the checkout.

You'll have to add that code in your CSS:

#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_shipping_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_total_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_subtotal_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_coupon_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_tax_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_payment_value,
#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_additional_value
{
	text-align: right;
}

#hikashop_checkout_cart table.table-striped tbody tr td.hikashop_cart_empty_footer
{
	border-top: 0px solid;
	border-bottom: 0px solid;
}

#hikashop_checkout_cart table.table-striped tbody tr.row0,
#hikashop_checkout_cart table.table-striped tbody tr.row1
{
	border-bottom: 1px solid #DDD;
	margin-top: 0px;
}

@media only screen and (max-width:350px) {
	.hikashop_product_price_full {
		padding-top: 10px !important;
		height: 50px !important;
	}
}

@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.table-striped tbody td#hikashop_checkout_cart_total2_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_shipping_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_final_total_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_coupon_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_tax_title,
	#hikashop_checkout_cart table.table-striped tbody td#hikashop_checkout_cart_payment_title,
	#hikashop_checkout_cart table.table-striped 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 td.hikashop_cart_total_value span.hikashop_checkout_cart_final_total { padding-left: 10px; }
	#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 }

}

The following user(s) said Thank You: mterry2

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

  • Posts: 75
  • Thank you received: 1
8 years 10 months ago #225591

Hi Nicolas

Thanks a lot, that seems to be just about right. The second "table row" (unit price) seems a bit squashed but I should be able to figure that out.

Can you please explain why the css file you refer to doesn't automatically update each time I install the latest Hikashop version? I have in the past made amendments directly to the custom file under hikashop>configuration>display and this doesn't seem to get overwritten (thankfully). But if this doesn't get updated, how are system changes (like the responsive cart functionality) pushed out. I'm a bit confused.

Hope that makes sense.

Kind regards
Mike

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

  • Posts: 13201
  • Thank you received: 2322
8 years 10 months ago #225606

Hi,

The css file you are using is the "custom" one, this one is created once you edit the "default" css file.
So once it is edited, we don't override it in order to not loose your modifications, but the updates are made on the "default" css file. To get the new modifications, you can compare your custom file with the default one.

I hope this is the answer you were looking for.

The following user(s) said Thank You: mterry2

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

  • Posts: 75
  • Thank you received: 1
8 years 10 months ago #225667

That's exactly the answer I was looking for. Appreciate the excellent and timely support, thank you.

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

Time to create page: 0.079 seconds
Powered by Kunena Forum