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

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

JennMaxwell
New Member
4 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
6736 1820 2202

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


JennMaxwell
New Member
4 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