Issue: Box-shadows on collection grid items were only visible on the left side despite a CSS box-shadow being applied.
Cause/Symptom: The outer shadow was likely being clipped by a parent element’s overflow setting, so only part of the shadow showed.
Solution: Add a CSS rule in theme.scss.css to set the relevant grid item container’s overflow to “unset !important,” allowing the shadow to render around the element. Steps given: Online Store → Theme → Edit code → theme.scss.css → append the new rule at the bottom.
Outcome: The store owner implemented the change and confirmed the shadows now display correctly.
Status: Resolved; no further questions raised.
My website is www.TOAIArt.com
I am unable to create proper box shadows to my collection grid items. Currently , shadow is only appearing on the left side.
the code that I am using is :
.collection-grid__item-link {
padding: 10px 10px 10px 10px;
box-shadow:
inset 0 0 10px 0 rgba(150,150,150,1),
10px 0 10px 10px rgb(100,100,100);
}
Can someone tell me what should I change?
HI @SurTri
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can try with this code.
Follow this:
Go to Online Store->Theme->Edit code->theme.scss.css->paste bellow code in bottom of file
.grid__item.one-half.medium–one-half.large–one-half.collection-collage__item.text-center{
overflow: unset !important;
}
If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.
Best regards,
Richard | PageFly
Thanks a lot Richard , You have been awesome !!! I have been able to implement all your solutions .
Thanks , once again.
