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.

Add to Home > Design > Custom CSS

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

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.

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 ?

@media screen and (max-width:640px) {
body#collection-5f0c05676a01a6439a5a789b {
    border: 10px solid red;
}
}

excellent , thank you so much @tuanphan

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!

KB

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!

KB

Can you share site url? We can help easier

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

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;
}

@tuanphan this worked like a charm-- thank you so much!

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%;
}
}

https://www.kabauer.com/blog/2020/09/18/the-sundial-issue-2-cover

Amazing-- another huge help, thank you!