Create Vertical Line Designs in Squarespace

[@TheGlueMill]

As an old-school graphic designer who, admittedly, watched the internet-design boat sail away, videos like these and their beautiful explanations are so invaluable to people like me.

[@ilze524]

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!

[@SEWebDesign]

That is great to hear! You are welcome!

[@Annastasia13]

Thank you so much! Your code is always so clean and thorough.

[@SEWebDesign]

I'm glad it was helpful! Thank you!

[@thaliasmusings]

This is awesome! Thank you!

[@SEWebDesign]

You're very welcome!

[@dylansneed4974]

chris, you rule. this is so useful! i really appreciate it!

[@SEWebDesign]

I'm so glad! You are welcome!

[@dougcrossley]

Amazing. I'd been searching for this ALL day. Thank you!

[@SEWebDesign]

I'm glad it was helpful! You are welcome!

[@elleharrison.design]

Thanks for this tutorial. Is the paper textured background of the sections just an image background you have added?

[@SEWebDesign]

Yes, exactly!

[@thedesignorder]

BRILLIANT Chris! Thanks for this!

[@SEWebDesign]

Glad you enjoyed it!

[@khawk247]

absolutely amazing tutorial! thank you for sharing this with us.

[@SEWebDesign]

You're very welcome! I’m glad you enjoyed it!

[@sayreambrosio]

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

[@SEWebDesign]

I'm so glad this will be helpful! It is a pretty manageable system I think.

[@LilBirdtweettweet]

Thanks for sharing brother - are you using an image of paper texture as the background, or are you doing it some other way?

[@SEWebDesign]

Yes exactly, it is an image of a paper texture

[@byemilyjane]

Amazing solution! Thank you.

[@SEWebDesign]

Thank you Emily!

[@sfphotogirl]

This is great! I love this look.

[@SEWebDesign]

I'm so glad!

[@yourqueenyasmeen]

hi thank you so much! it works great on desktop, but my vertical line changes to a horizontal line on tablet/mobile view. Any fix to this?

[@SEWebDesign]

You can remove the media query in the CSS!

[@alexlee9562]

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.

[@SEWebDesign]

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

[@kupotenshi]

Super helpful, thank you!

[@SEWebDesign]

I’m so glad! You are welcome!

[@hermessybun]

Great video! The website mockup looks like "ETHEREAL" " FUNCTIONAL" and "JOANE" would be expandable. Similar to an accordion.

[@SEWebDesign]

Thank you!

[@gullable]

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!

[@SEWebDesign]

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.

[@gullable]

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

[@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?

[@gullable]

🤦‍♂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

[@orincywhytedesigns]

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

[@SEWebDesign]

Yes! Officially called custom properties if you want to look into it more!

[@rowenadorn1933]

Hi Chris! Just want to say I'm really enjoying your tutorials, your way of explaining the process and alternatives is very easy to follow and understandable. 😊. Quick question on this vertical line code, I've tried this but I cant get the line to go right next to the image (like a border) there's always a Slight gap between the image and the line. I've tried afew different coding variations and it's all the same. It's like the grid format of SS doesn't allow for it? Line sits between the grids and the image sits inside the grid squares. I've ended up coding in some borders instead but just wondering if you had a workaround for this whether SS has changed anything since you recorded this? I'd prefer not to have code in borders as I like the freedom this line code offers. Thanks for your time.

[@SEWebDesign]

It sounds like you need to remove the column gap and then there won’t be a gap between the image and line. If you are looking to do rectangle borders around images, you can also use a shape block with no background and a stroke to create an outline around the image.

[@michaelalala]

Yesss just what I needed, thank you!

[@SEWebDesign]

Awesome to hear! I’m glad it was helpful!

[@JaiSequoia]

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!

[@SEWebDesign]

No problem Jai!

[@jess30p]

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?

[@SEWebDesign]

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

[@komaldhobe135]

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.

[@SEWebDesign]

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.

[@harvestnhome]

Hi! How do you add the horizontal line under the header?

[@SEWebDesign]

When editing the header there is a border oprion!

[@lisadesignstudio]

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

[@jacobbrooks9414]

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.

[@jacobbrooks9414]

Scratch that. Looks like I found it under the "Site Style" under "Spacing." Hope this helps other who may have missed it.

[@SEWebDesign]

Glad you found it!

[@ELnIn0777]

will this work if I need the lines to be different colors?

[@SEWebDesign]

It’s not what it was meant for. At that point you would need to add the colors as inline styles to the line block html as managing all the different colors in the CSS window would get really confusing