How to display additional photos on product page horizontally? Please help. (1.7.5)

[Layton]

Hi everyone.

I would like some help please regarding my website. I use prestashop 1.7.5 theme PRSADD040 & website is www.gr8-kitchenware.co.uk

When I view product photos on mobile site they are stacked under each other. I would like them to be side by side so that they do not take up as much vertical space.

I can achieve this by changing line 887 of global CSS to 33% instead of 100% (as shown in screenshots). However, when I do this it also messes up my checkout page width and makes it look ridiculous (as shown).

Does anyone know how I can make the photos horizontally next to each other and keep my checkout page at 100% width please?

Thank you so much'

-Layton.

 

 

 

Edited March 15, 2022 by Layton (see edit history)

[Prestachamps]

Hi @Layton

Add these css rules to the end of your theme.css:
This will affect only the thumb images on the product page and will make it fit all the images in a single row.
 

#main .product-leftside .images-container ul#additional-grid {
    display: flex;
    padding: 0;
    gap: 10px;
}

#main .product-leftside .images-container ul#additional-grid > li.thumb-container {
    padding: 0;
}

Cheers,
Leo

[Layton]

Hi @Prestachamps...I am truly grateful for your help on my topics, this worked great for me! Many thanks