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

CSS for Responsive Fixed border

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

Edited by oliviamgmt
Initial Revision

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

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)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...