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

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?

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!

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.

not working :disappointed_face: