This is genius! Been struggling with finding a proper solution to vertical lines for years (on and off!). This is by far the best one I've found. Thank you so much!
Amazing tutorial! I was not looking forward to bringing somebody over from a different platform that has blocked out sections with lines all over their site. Just makes it so much easier
Thank you so much, this is exactly what I was looking for and it works perfectly! Quick question: On your example page, you have some vertical text: HEALTHCARE and APOTHECARY. I know how to rotate text so that it looks like "healthcare" but cannot for the life of me figure out how to point it in the other direction. Is this a quick fix?
For vertical text you can use: writing-mode: vertical-rl; text-orientation: mixed; If you want it the other way, add a transform: writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
Thank you SO much for this! mainly the responsiveness of the height of the vertical line, which no one else tutorials seem to mention! Quick question- are you have issues with how a 1px line displays when ad=ing with the inbuilt section divider line? I think it looks pixilated compared to when it's added via code, line block or at the bottom of the header.
I'm glad this was helpful! I personally haven't seen the pixelation problem with the divider but I have a high res 4k monitor so that could be part of it
Implemented to the letter, but no luck. Tried debuging as well. Could be my custom CSS, but I saw nothing in there that should interfere. Bummer, I'd love to use this on my current project. It's very smart and clever!
Try copying and pasting the CSS from the blog post in the video description. And copy and paste the HTML for the line into the code block. That will ensure it is correct.
Thanks for the reply, Chris. I did that initially based on your updates. Added to my footer, and to the code block. It must be something to do with my CSS - there's a fair amount. I may poke around, but you know how these things can guzzle our time lol! ;D @@SEWebDesign
@@gullable you said you added it to the footer and to your code block? The CSS should be placed in the custom CSS window not the footer code injection. Maybe that is it?
🤦♂That was a great call, my bad. It (almost) did the trick. Everything looks perfect in the SQSP editor. But rendering in Chrome, all I get is the 10px high line top-aligned. I cheecked my syntax 3 times. It's accurate and in the right place (now). I'm stumped. SO CLOSE! @@SEWebDesign
Hey! in edit mode (mobile view) the full code block fills with the color of the line. is there a way to remove this to just the line, not the full block as it's confusing for my clients, that the full block will show up coloured. Thanks Lisa
hey Chris, thank you so much for another excellent tutorial. hugely appreciate it! I have got one question though, I tried this code out but it doesn't seem to work on Firefox for some reason. my Firefox version is 112.0.2. there is no before class being added.
I included CSS in the blog post that should work for all browsers. Firefox doesn't support :has() yet which is why the video CSS wasn't working, but Chrome and Safari do.
How are you getting your grid to span the full width of your page? My grid seems to force me to only design within a narrow area relative to yours. Feels like I'm working within a blog. Any help would be appreciative. Thanks.
![Add a Vertical Line to a Page on Squarespace [Easy Code]](http://i.ytimg.com/vi/RGFg82fyRqo/mqdefault.jpg)
![Add a Vertical Line to a Page on Squarespace [Easy Code]](/img/tr.png)
This is genius! Been struggling with finding a proper solution to vertical lines for years (on and off!). This is by far the best one I've found. Thank you so much!
That is great to hear! You are welcome!
Amazing solution! Thank you.
Thank you Emily!
Super helpful, thank you!
I’m so glad! You are welcome!
BRILLIANT Chris! Thanks for this!
Glad you enjoyed it!
chris, you rule. this is so useful! i really appreciate it!
I'm so glad! You are welcome!
Thank you so much! Your code is always so clean and thorough.
I'm glad it was helpful! Thank you!
Amazing. I'd been searching for this ALL day. Thank you!
I'm glad it was helpful! You are welcome!
Amazing tutorial! I was not looking forward to bringing somebody over from a different platform that has blocked out sections with lines all over their site. Just makes it so much easier
I'm so glad this will be helpful! It is a pretty manageable system I think.
Great video! The website mockup looks like "ETHEREAL" " FUNCTIONAL" and "JOANE" would be expandable. Similar to an accordion.
Thank you!
This is awesome! Thank you!
You're very welcome!
I LOVE THIS!!! Css finally has variables??? And I call myself a css stan 😩 time to learn all the stuff I’m missing out on! Great videos
Yes! Officially called custom properties if you want to look into it more!
absolutely amazing tutorial! thank you for sharing this with us.
You're very welcome! I’m glad you enjoyed it!
Thanks for this tutorial. Is the paper textured background of the sections just an image background you have added?
Yes, exactly!
Yesss just what I needed, thank you!
Awesome to hear! I’m glad it was helpful!
Wow whew! That was some heavier css lifting Chris! Bunch of stuff there I had no idea about. Might come in handy in my near future. Thanks!
No problem Jai!
This is great! I love this look.
I'm so glad!
Thank you so much, this is exactly what I was looking for and it works perfectly! Quick question: On your example page, you have some vertical text: HEALTHCARE and APOTHECARY. I know how to rotate text so that it looks like "healthcare" but cannot for the life of me figure out how to point it in the other direction. Is this a quick fix?
For vertical text you can use:
writing-mode: vertical-rl;
text-orientation: mixed;
If you want it the other way, add a transform:
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
Thank you SO much for this! mainly the responsiveness of the height of the vertical line, which no one else tutorials seem to mention! Quick question- are you have issues with how a 1px line displays when ad=ing with the inbuilt section divider line? I think it looks pixilated compared to when it's added via code, line block or at the bottom of the header.
I'm glad this was helpful! I personally haven't seen the pixelation problem with the divider but I have a high res 4k monitor so that could be part of it
Implemented to the letter, but no luck. Tried debuging as well. Could be my custom CSS, but I saw nothing in there that should interfere. Bummer, I'd love to use this on my current project. It's very smart and clever!
Try copying and pasting the CSS from the blog post in the video description. And copy and paste the HTML for the line into the code block. That will ensure it is correct.
Thanks for the reply, Chris. I did that initially based on your updates. Added to my footer, and to the code block. It must be something to do with my CSS - there's a fair amount. I may poke around, but you know how these things can guzzle our time lol! ;D @@SEWebDesign
@@gullable you said you added it to the footer and to your code block? The CSS should be placed in the custom CSS window not the footer code injection. Maybe that is it?
🤦♂That was a great call, my bad. It (almost) did the trick. Everything looks perfect in the SQSP editor. But rendering in Chrome, all I get is the 10px high line top-aligned. I cheecked my syntax 3 times. It's accurate and in the right place (now). I'm stumped. SO CLOSE! @@SEWebDesign
Hey! in edit mode (mobile view) the full code block fills with the color of the line. is there a way to remove this to just the line, not the full block as it's confusing for my clients, that the full block will show up coloured. Thanks Lisa
hey Chris, thank you so much for another excellent tutorial. hugely appreciate it! I have got one question though, I tried this code out but it doesn't seem to work on Firefox for some reason. my Firefox version is 112.0.2. there is no before class being added.
I included CSS in the blog post that should work for all browsers. Firefox doesn't support :has() yet which is why the video CSS wasn't working, but Chrome and Safari do.
How are you getting your grid to span the full width of your page? My grid seems to force me to only design within a narrow area relative to yours. Feels like I'm working within a blog. Any help would be appreciative. Thanks.
Scratch that. Looks like I found it under the "Site Style" under "Spacing." Hope this helps other who may have missed it.
Glad you found it!
Hi! How do you add the horizontal line under the header?
When editing the header there is a border oprion!
Awesome thanks for this one!
Glad you like it!