Adjust width of the image to be same as the box below

Solved

Adjust width of the image to be same as the box below

NikosBat
Explorer
336 0 52

Hello guys,  how can I adjust the width of the side of the image to be the same as this box for mobile?

 

 

Bildschirmfoto 2025-01-14 um 23.54.19.png

Accepted Solution (1)

DaisyVo
Shopify Partner
3794 412 499

This is an accepted solution.

Hi @NikosBat ,

You can follow the steps here:

 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

 

Here is the code for step 3:

@media screen and (max-width: 768px){
ul.product__media-list > li {
    margin: 0 !important;
    width: 100% !important;
}
ul.product__media-list {
    gap: 0;
}
product-info > .page-width {
    padding: 0 !important;
}
}

Here is the result:

DaisyVo_0-1736898736201.png

 

Please let me know if it works!

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

EstherBui
Excursionist
276 39 42

Hi @NikosBat 

 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.

@media only screen and (max-width: 800px) {
.product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
}
}

 

I hope it helps. 

 

Esther 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

NikosBat
Explorer
336 0 52

Thanks for helping me EstherBui, that solved my problem

DaisyVo
Shopify Partner
3794 412 499

This is an accepted solution.

Hi @NikosBat ,

You can follow the steps here:

 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

 

Here is the code for step 3:

@media screen and (max-width: 768px){
ul.product__media-list > li {
    margin: 0 !important;
    width: 100% !important;
}
ul.product__media-list {
    gap: 0;
}
product-info > .page-width {
    padding: 0 !important;
}
}

Here is the result:

DaisyVo_0-1736898736201.png

 

Please let me know if it works!

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
NikosBat
Explorer
336 0 52

Thanks for helping me DaisyVo, that solved my problem