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

Site Border for a specific page on Brine



Site URL: https://sunfish-giraffe-gaz6.squarespace.com/selected-work

Hi Team,


I am trying to achieve a site border for a specific page (not the entire website).

The Page in question - https://sunfish-giraffe-gaz6.squarespace.com/selected-work

Password - qwerty

Basically the look as seen in the first attached jpeg (but that look I achieved is via site style which applies the border throughout the website). So looking for a code which targets only this page.

I did some basic research and I did try the code found on this thread :-


body#collection-5eb9a0ccd4d3cc58981f8766 {
    border: 10px solid red;

But it gave a border AROUND the entire page, including AROUND the header and footer (please see the second attached jpeg), unlike what I want.




Edited by ruchitkapoor
Link to comment

12 answers to this question

Recommended Posts

  • 0

Hi Tuanphan,

I had come across your code mentioned above in one of the post But it gave a border AROUND the entire page, including AROUND the header and footer, so basically it brought the header/footer to the middle of the page (please see the second attached jpeg), unlike what I want.

I need what site styles SITE : BORDER can give me. A border around the actual content of the page, while my header/footer are on the top/bottom.

You'll get a fair idea if you check the jpegs in my first question.

Link to comment
  • 0
22 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-5f0c05676a01a6439a5a789b {
    border: 10px solid red;


My mistake, your code actually worked and I got what I needed.

Although it worked exactly for desktop/laptop 

but for mobile it's look weird. Please look at the attached jpeg.

Can there be a code that can reduce the px value only for mobile ?

Screenshot 2020-07-16 at 1.31.40 PM.png

Link to comment
  • 0
On 12/21/2020 at 1:47 AM, KABAUER said:

Hello @tuanphan!

I have a similar question— is there code like this I could use to put the border around the mobile header? As it stands, the border starts below the header (screenshot attached).

Thank you!



Can you share site url? We can help easier

Link to comment
  • 0
On 12/23/2020 at 4:36 AM, KABAUER said:

Absolutely! It is http://www.kabauer.com

Hi. Sorry for the delay. I was off some days for the new year

Add to Home > Design > Custom CSS

/* mobile header border */
.Mobile-bar.Mobile-bar--top {
    border: 15px solid black;


Link to comment
  • 0

Blog post is a bit narrow on tablet. If you want to increase width, add this to Design > Custom CSS

/* Tablet blog content */
@media screen and (max-width:900px) and (min-width:641px) {
div#item-5f65020cec8e536179243b06 .span-12 .span-6 {
    width: 100%;



Link to comment

Create an account or sign in to comment

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

  • Create New...