Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS for Responsive Fixed border


Guest

Question

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
  • Answers 4
  • Created
  • Last Reply

4 answers to this question

Recommended Posts

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

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

Archived

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


×
×
  • Create New...