Cart display on mobile not displayed properly

  • Posts: 586
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
6 years 10 months ago #285368

-- HikaShop version -- : 3.2.2.
-- Joomla version -- : 3.8
-- PHP version -- : 7

Hi,

Just to let you know.

When you go create menu-item cart display, and look it on mobile it is not displayed properly. See screeshot



I don't know if this has something to do with my template.
But also without all my custom CSS it looks the same.

I fixed it with this custom CSS code:
@media (max-width: 461px) {
#hikashop_cart_product_listing {
    padding-top: 70px;
    }}

But also the tabled layout doesn't look good in a specific pixel rance between 790 and 769 pixels.



So maby it's worth to take a look at this part of the code if you see the same issues on your hand.

Kind regards,
Lumiga

Kind regards,
Lumiga
Attachments:
Last edit: 6 years 10 months ago by Lumiga.
The following user(s) said Thank You: Philip

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
6 years 10 months ago #285394

Hello,

Thanks for your return, I process some test and see by myself some point to correct, but that wasn't same display issue than you.
Is it possible to see your page with this issue ? That will allow me to investigate and maybe find the root issue.
Awaiting news from you.

Thanks !
Regards

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

  • Posts: 586
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
6 years 10 months ago #285414

Hi Philip,

I have delete my custom code, so now you can see the issue on this page:

This message contains confidential information


But first put some products to you cart.

Kind regards,
Lumiga

Kind regards,
Lumiga
Last edit: 6 years 10 months ago by Lumiga.
The following user(s) said Thank You: Philip

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
6 years 10 months ago #285435

Hello,

There is a specific responsive css command which is missing... Quite strange...
Add to your default_frontend.css this css command :

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px) {
  .hika_toolbar.toolbar {
     float: none;
  }
}

Note : You will see in this tutorial , how to add css command in your frontend file.
That may correct, your display issue.

Best regards

Last edit: 6 years 10 months ago by Jerome. Reason: fix CSS code which came from a ctrl+c/ctrl+v of the browser inspector tools with some extra content
The following user(s) said Thank You: trevsmiff

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

  • Posts: 586
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
6 years 10 months ago #285563

Hi Philip,

Your code doesn't work. (I have delete this line frontend_defaul…1515086459:933, but still it didn't worked)
So I use this code to fix the issue.

I have put in my own custom CSS.

@media (max-width: 768px) {
.hika_toolbar.toolbar {
    float: none;
    }}

Kind regards,
Lumiga

Kind regards,
Lumiga

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

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
6 years 10 months ago #285565

Hello,

Yes you can adjust the media query depending your needs.

More than the extra content "frontend_default.." there was also missing brackets for the @media ; it's a side effect of the browser inspector tools when you perform a copy/paste.

Regards,

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.
The following user(s) said Thank You: Lumiga

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

Time to create page: 0.080 seconds
Powered by Kunena Forum