Order table not responsive

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #278063

-- HikaShop version -- : 3.2
-- Joomla version -- : 3.7.5
-- PHP version -- : 7.0
-- Browser(s) name and version -- : firefox

Hi,

After login from mobile device, if the user want to see a specific order in his order history, the table class="hikashop_order_main_table" is not responsive. Why?

I tried to add the following CSS string in Front-end CSS File but the order table content looks strange on mobile.

@media only screen and (max-width:350px) {
#hikashop_order_main table {
width:50% !important;
}

Can you please confirm if the CSS string I added is correct? If not, what should be?

Thanks

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #278068

Hi,

Your CSS is not correct.
It's much more complex if you want to display nicely a table like the one there on mobile devices.
It's actually one of the top priorities we have on our todo list and we plan on adding that in the next version of HikaShop.

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #278095

Hi Nicolas,
Now it looks perfect. I suppose that you fixed the problem. Thanks a lot!

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #278096

Nicolas,
I just realized that now the product name and the unit price in the order table are not displayed and also the amount of Total (excl. VAT) is nil . How can I fix the problem? Thanks

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #278107

Hi,

I didn't fix anything.
Please provide a link and the necessary user account to be able to look at the page you're talking about as well as a screenshot of the order details in the backend.

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #278268

Hi Nicolas
I sent the account details via private message. See the attachments for the screenshots. Thanks in advance.
Imma

Attachments:

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #278289

Hi,

Please use our contact form next time:
www.hikashop.com/support/contact-us.html
I'm not the only one handling the support here and others don't have access to my PMs.

I've checked your link but I don't see the problem you're describing:

I just realized that now the product name and the unit price in the order table are not displayed and also the amount of Total (excl. VAT) is nil

Even in your screenshot ( www.hikashop.com/media/kunena/attachment...45/orderfrontend.PNG ) I do see the rpodut name, the unit price and the total amount.
So I don't understand what you mean.

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #278355

Hi,

You are right: in the order detail page as sent on the screenshots, order information (product, quantity, price...) is displayed on the order table. However, if the page is opened from mobile device, part of the information is not desplayed on the mobile view. I think it is related to the table width which should be adapted to mobile screen.

Is that? How can I fix the issue?
I can not send you screenshot for mobile view but I guess you have simulator to check that the order table (for ex for order 889/11/09/2017) is not responsive on mobile.

Thanks

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #278369

Hi,

Hi,

This comes from the CSS:
p {
width: 510px;
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
}
That you have in the file templates/shaper_helix3/css/bootstrap.min.css of your template which forces the width of the area to be 510px wide and thus breaks the responsiveness of the page.

I would also recommend you to contact your template provider about that issue. Forcing the p tags to have a fixed width everywhere is not something you want, especially on mobile devices. They should add @media queries to not have that CSS enforced on mobile devices.

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

Time to create page: 0.109 seconds
Powered by Kunena Forum