How can I adjust mobile product page layout on Dawn theme?

RRR111
Shopify Partner
8 0 1

Hi, I want the product page layout to be likewise to the attached image.

 

Product images should be left and content should be right for the mobile version, I am using the dawn theme.

 

Can someone help me with this?

 

example1.jpg

Replies 3 (3)

deepaksharma
Shopify Partner
448 62 91

Hey @RRR111 

 

You will have to change the main-product.liquid HTML layout along with CSS for media query which are handling the mobile view.

 

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com

Alisa_Garg
Shopify Expert
20 0 3

Hi @RRR111,

 

This may help you -

 

( Add this CSS to position images on the left and content on the right for mobile )
@media screen and (max-width: 768px) {
.product-page__media {
float: left;
width: 50%;
}
.product-page__content {
float: right;
width: 50%;
}
}

 

If that's work for you, Please like this comment.

RRR111
Shopify Partner
8 0 1

not working 😞