our hikashop looks good on an iphone. Except the product listing pages.

  • Posts: 89
  • Thank you received: 3
  • Hikashop Business
7 years 9 months ago #274421

Everything of our shop looks good.

Except the product listing pages.

On a computer browser:



But on an iPhone half of the text disappears:



I guess the text should go under the picture in stead of next to is.

How can I change that?

Attachments:

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

  • Posts: 200
  • Thank you received: 75
7 years 9 months ago #274451

Hi,

the "image / description" display you're using for your product listing makes use of table elements which are not very suitable for responsive websites unfortunately, so the best way would be to customise your view file to suit your needs (see the documentation www.hikashop.com/support/documentation/1...-display.html#layout ).

But a quick fix is possible using something like the following CSS:

@media (max-width: 1000px){
   .hikashop_listing_img_desc td{
  	display:table-row;
   }
}

You can add this in your template CSS file or in your HikaShop > Configuration > Display > CSS > Front-end CSS file. For more info check out the documentation at www.hikashop.com/support/documentation/84-css-styling.html . The 1000px will determine at what screen width the text will go below the image, you can change it to whatever value you prefer.

Hope this helps.

The following user(s) said Thank You: Jerome

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

  • Posts: 83799
  • Thank you received: 13571
  • MODERATOR
7 years 9 months ago #274427

Hi,

You could try adding such CSS on your website:
.hikashop_product_listing_image{ width: 100% !important; }
That will make the images resize automatically on the listings and it should help on small screen sizes.
www.hikashop.com/support/documentation/1...ize-the-display.html

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

Time to create page: 0.058 seconds
Powered by Kunena Forum