All things Shopify and commerce
Hello guys, how can I adjust the width of the side of the image to be the same as this box for mobile?
Solved! Go to the solution
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:
Please let me know if it works!
Best,
Daisy
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
Thanks for helping me EstherBui, that solved my problem
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:
Please let me know if it works!
Best,
Daisy
Thanks for helping me DaisyVo, that solved my problem
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025