Hello,
can someone help me to remove the highlighted gap on mobile so that the product is aligned with the title etc.
Topic summary
A user seeks to eliminate excess white space between product images and titles on mobile devices. The gap appears to originate from padding within the product image itself rather than CSS spacing.
Proposed Solutions:
- Re-crop and re-upload the product image to remove built-in bottom padding
- Add CSS code to
timber.scss.csstargeting.product-single__media-groupwith negative bottom margin on mobile viewports (max-width: 768px)
Current Status:
The CSS solution successfully removed the gap, but introduced a new issue where the product image now appears cropped/cut off on mobile devices. The discussion remains unresolved as the initial fix created an unintended side effect that requires further adjustment.
Hi @KimGottwald ,
I can see your image have a big gaps at the bottom, so you can try to upload other image (https://aliudclothing.com/cdn/shop/files/Produktbilder_EM_Ultra_FRONT.png?v=1718098384)
Also, you can go to Online store → Edit code → find “theme.scss.css” file and update the below code at the last bottom:
.product-single__media-group-wrapper .slick__controls {
margin-top:0 !important;
}
Hope this helps!
Hello @KimGottwald , there is an issue with the image. Please crop and add it again. Your issue will be resolved.
1 Like
Hello @KimGottwald
You can add this code to timber.scss.css
@media only screen and (max-width: 768px) {
.product-single__media-group.slick-initialized {
margin-bottom: -80px;
}
}
Let me know if the issue is solved.
