Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Right page border missing / right edge overflowing

    General Discussion
    3
    8
    338
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      brianagarelli last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @brianagarelli

        can you post a link to your website?

        Then we can have a look :-)

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • B
          brianagarelli last edited by

          Hi Marius, thanks for getting back to me! My website is at www.brianagarelli.com

          Thanks,

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            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

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • B
              brianagarelli last edited by

              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!

              1 Reply Last reply Reply Quote 0
              • edgrbnz
                edgrbnz last edited by edgrbnz

                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.

                ✦ ✦ ✦

                B 1 Reply Last reply Reply Quote 1
                • B
                  brianagarelli @edgrbnz last edited by

                  @edgrbnz That worked! Thanks so much :)

                  1 Reply Last reply Reply Quote 1
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @brianagarelli
                    great answer @edgrbnz .

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post

                    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

                    Thanks!

                    Online Users

                    A
                    F
                    G
                    D
                    S
                    M

                    Recent Topics

                    • K

                      Unable to update lay theme / to login wp admin

                    • S

                      Theme crashed - because of Polylang?

                    • A

                      New button feature not available

                    • A

                      carousel addon not working after update

                    laytheme.com