Adding CSS shadows to your Collections and Containers

[Joe_Gabriele]

For adding some visual interest to your Glide Apps! The shadow on cards don’t look that good on mobile, both in vertical and horizontal, so I made it display on desktop only.

Reference on adjusting the shadow to fit your needs:

CSS box-shadow property

/*---Add Shadow to Container (the StyledDiv7 could be different for you)--*/
.container-shadow div[class*="StyledDiv7"] {
box-shadow: 0px 11px 40px  rgba(0, 0, 0, 0.27);
}

/*---Shadow on Card Collection---*/
@media (min-width: 600px) {
.card-shadow [data-testid="cc-card"] {
box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.27);
}
}