Shopify themes, liquid, logos, and UX
Hello all.
So I am at my wits end. On the actual page of a product the image (the main tile i have variant's) the picture is way too big.
I have tried to resize the images through the file manger, and the product page.
I have even changed the page width to the minimum.
Any help will be greatly appreciated Please.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hello @ImStillLearning,
To resolve this issue, you can paste the below code into your base.css file.
@media screen and (min-width: 900px){
.product:not(.product--columns) .product__media-list .product__media-item:first-child, .product:not(.product--columns) .product__media-list .product__media-item--full {
width: 97%!important;
max-width: 75%!important;
}
slider-component{
left: 75px!important;
}
}
Before:-
After:-
Let us know if you need any further help with this.
Regards,
CedCommerce
Hello @ImStillLearning
It's GemPages support team and glad to support you today.
You can follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your base.css file and paste the following code below:
@media screen and (min-width: 990px){
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.product--large:not(.product--no-media) .product__info-wrapper {
max-width: 50%;
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
Let us know how it works for you.
Best regards,
GemPages Support Team
Hello
Thank you for your quick reply. But it hasnt worked 😞
Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
This is an accepted solution.
Hello @ImStillLearning,
To resolve this issue, you can paste the below code into your base.css file.
@media screen and (min-width: 900px){
.product:not(.product--columns) .product__media-list .product__media-item:first-child, .product:not(.product--columns) .product__media-list .product__media-item--full {
width: 97%!important;
max-width: 75%!important;
}
slider-component{
left: 75px!important;
}
}
Before:-
After:-
Let us know if you need any further help with this.
Regards,
CedCommerce
Thank you.
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