Right page border missing / right edge overflowing
-
Hi there,
I've added a page border using CSS to my site. However, the right edge is not showing? After looking a bit closer, it seems like the right side of my site is not flowing properly to the edges of my screen (there's a bit more space on the left than there is on the right). Here's a screenshot for reference.
https://www.dropbox.com/s/14dgq5uljhocu4p/Screenshot 2019-02-13 12.04.30.png?dl=0
Thanks!
-
-
Hi Marius, thanks for getting back to me! My website is at www.brianagarelli.com
Thanks,
-
Dear @brianagarelli
I would not use this way.I would build 4 boxes with CUSTOM HTML.
With CUSTOM CSS I would position them fixed to build the frame.Best!
Marius
-
Thanks @mariusjopen
Any idea how to avoid having the content scroll on top of the border color? I'm using this for Custom HTML:
<div class="border"></div>
And this in Custom CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}.border {
position: fixed;
top: 0;
left: 0;
border: 12px solid #000;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}Thanks!
-
Well I guess it’s because css-borders always add to the element. So the div gets bigger – If you add 15px to one side it will push the other side out of the viewport – That’s why you don’t see the border on the right side and probably wouldn’t see it on the bottom if there were no footer.
If you set the body width to roughly 98% you can see the border on the right. I wouldn’t consider this a clean solution though…
You could try adding
box-sizing: border-box;
to your.border
class as written over here and see if that does the trick. -
@edgrbnz That worked! Thanks so much :)
-
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it