How do I create a border around my pages that doesn't interfere when I'm editing?

3. How do I create a border around my pages that doesn’t interfere when I’m editing?
I omitted this idea because it was too cumbersome to navigate around it in edit mode. I created a section that housed the 50-60px white border and raised the Z-index to a very high number. But then it created this barrier on my entire project throughout my pages. I would have to constantly hide the section altogether and then remember to show it when publishing. I ultimately ditched the idea but would like to understand a better practice to achieve this.


Here is my site Read-Only: LINK

hi @kw4ugh I do not exactly understand what yo trying to achieve but you should thing about it as about layers on top of each other. Here is an example what I mean. With this method you will be able to create your frame around pages by using padding and/or margin.

Hi Stan,
Maybe this diagram will explain what I’m trying to do. I understand the concept of the box-model and the boxes laying on top of one another. The problem is when I create a div or section to house the border, keeping in on top at all times, it creates a barrier over my content. I’m unable to click anything under the border div/section (image 3).

hi @kw4ugh I do not understand why you need to place border on top instead creating same effect in standard way but you can use css to force click through layer with pointer-events:none. This will do the trick but you would not be able to do on-hover effect. Another way can be using JS click event. You can search internet for click through layer css to find some examples.

EDIT: I have created simple EXAMPLE with CSS approach.

@Stan,

Ohhh, okay. I see what you mean now.
Thanks for this!

Hi @kw4ugh glad to help embrace some css behaviour, if this solved your issue feel free to mark any response as solution to close this request.