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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024