Can't figure out how to stack text below image on mobile

2 0 0

Hi there,


My product pages on mobile aren't great for converting customers as the images are too small and the layout feels awkward in 2 columns, so I'd like to get the image slider to be larger and at the top in the middle, then for the product name, description, and variant selector to appear underneath the image. I'm using the dawn theme, website is, and I've attached how my mobile product pages look at the moment




Thank you in advance! 

Replies 2 (2)

Shopify Partner
3794 958 1190

Hey @JennMaxwell 


Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

@media screen and (max-width: 767px) {
.product.grid {
    display: block !important;




If I managed to help you then, don't forget to Like it and Mark it as Solution!


Best Regards,

Need a Shopify developer? Chat on WhatsApp

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
2 0 0

oh my gosh this is almost perfect! Is it possible to keep the images at their original ratio? with this code, they show as a bit too wide and the bottom is cut off. thank you so so much for this