Hika Shop not responsive despitw Bootstrap on and code in custom.css

-- url of the page with the problem -- : www.ginmacher.de
-- HikaShop version -- : 3.2.2
-- Joomla version -- : 3.7.1
-- PHP version -- : 7.0
-- Browser(s) name and version -- : Firefox
-- Error-message(debug-mod must be tuned on) -- : Hika Shop not responsive at Checkout despite Bootstrap and code in dfault.css template

Hello Team,

I searched through the forum and found several topics ragrding checkout and non resposnive. I read thrugh them but still my checkout is not responsive.

I have the latest Hika Shop version, I have bootstrap on, no legacy checkout and also this code in the custom code in custom.css of the my template itself (I found it in one of your posts):

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

Hello Nicolas,

thanks for your fast reply. That works for the checkout good, but one thing here: the prices boxes are still overlapping the columns (see picture): How can I solve this?

Hello Philipp,

the update solved some issus, but unfortunately not all of them.

I am still facing the following issue (as posted in my message before):

In the shopping cart (not the checkout, this is OK now) the header is now correct as the buttons move below the header, but in the table overview of the products there is still no product name or product picture in the shopping cart summary before he clicks then to the checkout button. How can I slove this?

2.) The User account data form still is to big for the mobile screen that the fields name, e-mail adress etc. are not shown completly on the screen. And you can also not not move the screen or make it smaller on the mobile. Is just stays there wiith half width of the fields (see also screenshot in my last post before ypur reply). How can I fix that?

I went to tge user account on your Hika site and there the form looks different and fits perfectly

Thanks a lot.

Hello Philippe,

I changed to Protostar and the same issue apprear (see screenshots)

1.) As you see in Picture one, it the picture gets to small (like mobile view), then the product picture disapears, the name of the product disapers etc. Pic 2 shows you how it should look like. Please be arware, this is not the checkout, that looks OK so far, it is the shopping baske overview before you go to the checkout

Hi Jerome, Admin Team,

thank you again for the answer. I did all the changes in the setting but unfortunately, the shopping cart summary still looks the same. In normal view it has pictures and product descriptions and qty, in responsive view the table shrinks to a mimimum with no pics, no product descriptions, no qty anymore. So the user does not see what is in his shopping cart.

Is there no way to modify the css file and the class (unfortunately I do not know which one) in a way, the the fields are getting smaller but on responsive view also higher that all the information is still shown (pictures I do not care, they can also dissapear in the overview, but product title and quantity).

Example: see the two screenshots in my last post.

Again: Checkout after shopping cart summary looks good now.

Regarding the user account issue I contacted my template provider.

Thank you very much

Hello Jerome,

thanks for your patience, I am no developer so I am learning via try and error.

I tried all things you have said, but maybe I miss something. It doesnt's matter which css I use in the background, it always gives me a bad result in responsivness in the shopping cart.

When I use styles for frontend "none" it gets me names and pics on the shopping cart, but still in a not good view (see screenshot):

Thank you, now finally works

Great job and support!!!!!