A user is experiencing a CSS box-shadow issue where the bottom shadow displays correctly on desktop (screens >749px) but appears cut off on mobile devices (<749px), with only the right shadow visible.
Attempted Solutions:
Proposed Fixes:
Two community members offered solutions:
theycallmemakka suggested adding custom CSS code in the theme.liquid file, just above the </head> tag (specific code snippet provided but appears corrupted in the thread).
PageFly-Richard recommended adding CSS to the Base.css file with a media query targeting screens with max-width 767px, specifically adding padding-bottom: 20px !important to the .slider.slider--mobile class.
Status: The issue remains unresolved in the thread, with no confirmation from the original poster about whether either solution worked. Both responses include code snippets that are central to implementing the fixes.
Hey guys,
i´m trying to use box-shadow, on PC (bigger than 749px) it works fine, the shadow shows up on the right and the bottom.
On mobile (smaller than 749px) it´s just showing the right shadowline. The bottom one seems like its cut off or something.
PC:
Mobile:
How can i get the bottom shadow back? I try´d using margin-bottom, but that´s just extending to right line, the bottom one is still cut off.
PW: 2023
Thanksss
Hi @MyEcomAgent ,
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code just above tag
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Hi @MyEcomAgent
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
@media screen and (max-width: 767px){
.slider.slider--mobile {
padding-bottom: 20px !important;
}
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly