Archived topic
Fixed width border around complete site
5 replies · Started by Evan on November 30, 2020
On this site: https://salidamuseum.org/
I would like to put a solid red border around the whole site. Including the header, menu, content and footer area. I know the css to add borders, but I cannot seem to target the wrapper or something that encloses the whole site.
Can you help me with the selector?
thank you,
mark
Hi,
As every content of the page is placed inside the <body> tag, you should be able to add border that encloses the whole site by adding this CSS:
body:before {
border: 2px solid red;
content: "";
width: 100vw;
height: 100vh;
display: block;
position: fixed;
z-index: 99999;
}
This adds a fixed border that stays within the viewport. If you want the border to span through to the content height, change the height to 100% instead of 100vh;
This is almost what I need. The red border I want should go tight around the content. Above and to the left and right of the black and white photo, on the left and right side of the menu, on the left and right side of the content, and the left right and bottom of the footer.
Thank you,
mark
Try this solution instead:
https://docs.generatepress.com/article/adding-a-container-wrapper/
That is perfect, just what I wanted.
Thank you,
Leo
No problem :)