Display of checkout page is messed up in mobile

  • Posts: 43
  • Thank you received: 0
10 years 9 months ago #168430

-- HikaShop version -- : 3.2.2

Hi,

The display of the checkout page is messed up in mobile.
Please see attached image
Would appreciate any assistance
Thanks!

Attachments:

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

  • Posts: 13201
  • Thank you received: 2322
10 years 9 months ago #168452

Hi,

Actually the cart in the checkout is in a html table, which is not the best solution for responsive but it's very difficult to put the cart in another kind of HTML.

This table have a variable size, so generally it cause no problems.
But on small resolutions, if there is a lot of content it don't have the place to be displayed, so the solution will be to use @media tags in order to remove some parts of the table for mobiles or change the html structure.

The view to edit is "checkout / cart", here is some documentation about layout customization:
hikashop.com/support/support/documentati...ize-the-display.html

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

  • Posts: 43
  • Thank you received: 0
10 years 9 months ago #168559

Hi!

Thanks for the tip.
Would it be possible for you to guide me on where I can put in the appropriate tags?
I am rather new to PHP and CSS as a whole :(

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

  • Posts: 26248
  • Thank you received: 4038
  • MODERATOR
10 years 9 months ago #168625

Hi,

In the documentation that Xavier gave you, there is a part which explain how override the HikaShop CSS file.
That is in that interface where you should put your specific CSS content.

You will see some "examples" in the front-end CSS of HikaShop like

@media only screen and (max-width: 480px) {
	table#hikashop_cart_product_listing tbody td:nth-last-child(1),
	table#hikashop_cart_product_listing th:nth-last-child(1),
	table#hikashop_clicks_listing tbody td:nth-child(1),
	table#hikashop_clicks_listing th:nth-child(1),
	table#hikashop_clicks_listing tbody td:nth-last-child(1),
	table#hikashop_clicks_listing th:nth-last-child(1),
	table#hikashop_sales_listing tbody td:nth-child(1),
	table#hikashop_sales_listing th:nth-child(1),
	table#hikashop_sales_listing tbody td:nth-last-child(1),
	table#hikashop_sales_listing th:nth-last-child(1),
	table#hikashop_leads_listing tbody td:nth-child(1),
	table#hikashop_leads_listing th:nth-child(1),
	table#hikashop_leads_listing tbody td:nth-last-child(1),
	table#hikashop_leads_listing th:nth-last-child(1)   {display: none;}
}
Which is some CSS rules to hide some table columns depending the size of the screen.

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.

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

  • Posts: 43
  • Thank you received: 0
10 years 9 months ago #168684

Hi,

Thank you both for your advise
I have trued to mess with the CSS but am not able to achieve the outcome.
Would it be possible for you to assist me?
I would greatly appreciate it!

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

  • Posts: 26248
  • Thank you received: 4038
  • MODERATOR
10 years 9 months ago #168728

Hi,

I am sorry but that is outside of our competences and outside of the kind of support that we can provide here.
We are developers, we help people to use/configure HikaShop, we fixed bugs ; we are not designers and not experts on CSS.

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.

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

Time to create page: 0.070 seconds
Powered by Kunena Forum
loading