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


ruchitkapoor

Question

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.

 

WHAT I WANT.png

WHAT I DON'T WANT.png

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!

KB

E7C1B330-A5FA-432E-9F02-C453BD2E7451.png

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

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

image.thumb.png.63fb66296e9c1a5e4d1f588d792afc4f.png

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...