ruchitkapoor Posted July 13, 2020 Share Posted July 13, 2020 (edited) 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 July 13, 2020 by ruchitkapoor Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 Add to Home > Design > Custom CSS body#collection-5f0c05676a01a6439a5a789b { border: 10px solid red; } ruchitkapoor 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ruchitkapoor Posted July 15, 2020 Author Share Posted July 15, 2020 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
ruchitkapoor Posted July 16, 2020 Author Share Posted July 16, 2020 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 ? Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 @media screen and (max-width:640px) { body#collection-5f0c05676a01a6439a5a789b { border: 10px solid red; } } ruchitkapoor 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ruchitkapoor Posted July 16, 2020 Author Share Posted July 16, 2020 excellent , thank you so much @tuanphan Link to comment
KABAUER Posted December 20, 2020 Share Posted December 20, 2020 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 Link to comment
tuanphan Posted December 22, 2020 Share Posted December 22, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KABAUER Posted December 22, 2020 Share Posted December 22, 2020 (edited) Absolutely! It is http://www.kabauer.com Edited December 22, 2020 by KABAUER Added URL Link to comment
tuanphan Posted January 2, 2021 Share Posted January 2, 2021 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; } KABAUER 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KABAUER Posted January 5, 2021 Share Posted January 5, 2021 @tuanphan this worked like a charm-- thank you so much! Link to comment
tuanphan Posted January 7, 2021 Share Posted January 7, 2021 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 KABAUER 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KABAUER Posted January 12, 2021 Share Posted January 12, 2021 Amazing-- another huge help, thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment