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

JennMaxwell
Visitor
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 http://thehoneydewlounge.com/, and I've attached how my mobile product pages look at the moment

 

IMG_6593.PNG 

 

Thank you in advance! 

Replies 2 (2)

Moeed
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.

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

RESULT:

Moeed_0-1712608272631.png

 

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

 

Best Regards,
Moeed

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. ❤️
JennMaxwell
Visitor
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