A user seeks help increasing the grid size for product images on their display page to match a reference example from their website (rivaajethnic.com).
Solution Provided:
A developer shared custom CSS code to increase the grid width to 95% using media queries, which can be added through the theme’s Custom CSS settings.
Follow-up Issue:
The user requested further adjustment to display the first two images fully visible without scrolling, as they currently require slight scrolling to view completely.
Resolution:
The developer explained that image height adjusts automatically based on device dimensions, and confirmed the images display fully without scrolling on their device. The user confirmed the solution worked successfully.
Hi All,
Can you please help on how can I increase the grid size where images are showed on product display page.
Looking it to be of similar size photo attached.
Website URL: https://www.rivaajethnic.com/products/aarvi-ajrakh-cotton-green-chudi-sleeves-kali-kurta
Many Thanks!
Hi @RivaajEthnic ,
You can increase grid size by adding below CSS on product page. You can put it in Custom CSS from theme customise.
@media (min-width: 1025px) {
.productView-container.container-1170 {
max-width: 95%;
}
}
Let me know If you need further more help.
Thank you very much Ankit. Is there any way to fit the first 2 images in one page without scrolling. Currently the first 2 grid are not completely fitting and we need to scroll a little to see full image.
It shows full images without scrolling in my device. Actually, it takes auto height as per device so you might see it in scroll. But from my end it shows full without scroll.
Many Thanks Ankit. It helped!
