A user working with Shopify’s Balance theme sought to restructure their mobile product page layout. The goal was to display a single full-width image at the top with thumbnails below, followed by product details—replacing the current two-column layout where small images and text were overlapping.
Current Issue:
Solutions Provided:
Outcome:
The issue was resolved through custom CSS modification, achieving the desired single-column mobile layout with full-width images.
Hello, I am attempting to create a mobile product page where there is a single image on top, with thumbnails underneath, followed by title, description, and the rest of the product info.
I am using the Balance theme.
Currently, my mobile product page has two columns, with very small images in the left column and the text in the right column overlapping the images.
My website is www.shopmoonhoney.com
Thank you!
Thank you for your reply.
Here is a screenshot of the product page settings for mobile- the “mobile layout” dropdown only has three options, Two Columns, Show Thumbnails, and Hide Thumbnails. I did manage to get the text to stop overlapping the images by toggling off the thumbnails, although whatever header font I choose, it still splits words in the title, as you can see. Ideally, I would like it to show just a single image at a time at maximum size for the mobile layout, with thumbnails underneath, and all other info under that. This is just for the mobile layout, desktop is fine and doesn’t have any issues.
Hi @moonhoney25
You can solve it by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
html .product .grid__item { max-width: 100% !important; }
}
Thank you for your reply.
I actually found the line of code that needed to be removed to achieve the same layout-
.grid--1-col .grid__item {
max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
but I appreciate your help.
Very welcome!