How to Change the Orientation of Images on the Product Page

Solved
preqc
Excursionist
22 0 11

I want the images on the product page to be next to the product description, like this

This is what my product page looks like currently, with the images above the product description. 

Screen Shot 2021-07-16 at 6.52.58 PM.png

KetanKumar
Shopify Partner
20680 2144 7829

@preqc 

thanks for post yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 1025px), (orientation: landscape) {
.product-content .product-gallery {
    width: 100vw;
    margin-left: 0;
}
.product-content .product-details {
max-width: 30.625vw;
    margin: 0px auto;
padding-left: 0;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
LitExtension
Shopify Partner
1247 163 220

This is an accepted solution.

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.product-template{
display: flex;
width: 100%;
justify-content: space-between;
zoom: 1;
max-width: 980px;
padding: 0 20px;
margin: 0 auto;
align-items: flex-start;
flex-wrap: wrap;
}
.product-template__media{
flex: 0 0 40%;
}
.product__content{
flex: 0 0 60%;
}
@media only screen and (max-width:989px) {
.product__content,
.product-template__media{
flex: 0 0 100%;
}
}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
preqc
Excursionist
22 0 11

Anyway to make this work with multiple images? 

This is what it looks like with more than one picture, I want every image to be next to the product descriptions. 

Screen Shot 2021-07-17 at 4.22.11 PM.png

0 Likes