My website: www.onecap.se
This is only regarding mobile-view.
Topic summary
A user is experiencing alignment issues with product images on their Shopify store (onecap.se), initially on mobile view where images appear too far left.
Mobile Fix:
A helper provided CSS code to add to the theme.liquid file above the </body> tag, which resolved the mobile spacing issue.
Desktop Issue Emerges:
After the mobile fix, the same alignment problem appeared on desktop view. The helper provided additional CSS using a media query (@media screen and (min-width: 768px)) targeting .collection-slider-row .container with left padding adjustments.
Ongoing Adjustments:
The user requested the layout be widened to fill empty spaces. The helper modified the padding values (changing from 65px to 20px for both left and right padding), but the user reports the spacing is now excessive.
Status: The discussion remains open as the user continues to fine-tune the exact padding values to achieve the desired layout balance between spacing and width.
Hey @OneCap
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
???
Hey @OneCap
Keep the previous code and add this new code right above in theme.liquid file
@media screen and (min-width: 768px) {
.collection-slider-row .container {
padding-left: 65px !important;
}
}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
(i want to fill out the spaces)
Hey @OneCap
Remove the previous code I sent and add this code above in theme.liquid file
@media screen and (min-width: 768px) {
.collection-slider-row .container {
padding-left: 20px !important;
padding-right: 2px !important;
}
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
