Create single-column mobile product page with image on top

[moonhoney25]

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!

[moonhoney25]

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.

[Dan-From-Ryviu]

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; }
}

[moonhoney25]

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.

[Dan-From-Ryviu]

Very welcome!