Archived topic
Add left and right box shadow
3 replies · Started by mikeb82 on June 30, 2020
The client wants a shadow on the left and right sides of the page top to bottom. I am able to get the shadows along the content and site-footer areas, but I'm not seeing it in the header, navigation and site-info areas. It's likely that I'm not targeting the correct selector(s). (There's a gap between the content and site-footer.) How do I get a shadow border along the left and right edges of the page?
Here's the CSS that partially works:
#masthead, .site-header, .main-navigation,
#content, .site-footer, .site-info {
box-shadow: -10px 0 10px -10px rgba(95,95,95,.5), 10px 0 10px -10px rgba(95,95,95,.5);
}Hi there,
You may be better off adding a container around the entire website: https://docs.generatepress.com/article/adding-a-container-wrapper/
That way you can apply the shadow to that one element.
Hi Tom,
Thanks for the information. I was able to get the box-shadow working. I had to rearrange some hook areas. I was using before_header hook for placing the header images, so I had to change these elements.
Thanks for the great support!
Mike
No problem! :)
