Jump to content

CSS for Responsive Fixed border

Recommended Posts

Hi all!

I am trying to find a way to create a fixed border around my entire website. Here is an example. I almost got it with the CSS from here, but can't quite figure out how to fix the bottom of the border to the edge of the window.

Thank you so much for your help!!

Olivia

Link to comment
  • Replies 4
  • Views 9.4k
  • Created
  • Last Reply

I figured it out y'all!

body { border:25px; border-style:solid; border-color:#000000 ;position: fixed;left: 0; bottom: 0;top:0; right:0}

Link to comment

Hi there.

This can be done like this. Remove any previous code you added. Then, add the following code via the CSS Editor:


.websiteFrame {
   position: fixed;
   z-index: 990;
   background-color: rgba(198, 250, 229, 1);
}

#websiteFrameTop {
   top: 0;
   left: 0;
   width: 100%;
   height: 10px;
}

#websiteFrameRight {
   top: 0;
   bottom: 0;
   right: 0;
   width: 10px;
}

#websiteFrameBottom {
   bottom: 0;
   left: 0;
   width: 100%;
   height: 10px;
}

#websiteFrameLeft {
   top: 0;
   bottom: 0;
   left: 0;
   width: 10px;
}

Then add the following code via Code Injection, to the "Footer" area:


<div id="websiteFrameTop" class="websiteFrame"></div>
<div id="websiteFrameRight" class="websiteFrame"></div>
<div id="websiteFrameBottom" class="websiteFrame"></div>
<div id="websiteFrameLeft" class="websiteFrame"></div>

Do let me know if this works for you. If you have any questions on it, I'm happy to answer them.

-Brandon


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.