Hi @byandreavaldes (and anyone else who stumbles upon this forum post), I have a slightly different solution to this problem that doesn't involve code (as long as your Squarespace site is on 7.1 Fluid Engine)!
Instead of adding vertical lines with code, I like to upload a graphic of a vertical line (that I created in Canva) on desktop view and then hide it behind an image or shape on mobile view (so that it doesn't show up).
✨ Here's a tutorial video explaining exactly how to do it:
https://www.luminescentdreams.com/tutorials/the-easiest-way-to-create-vertical-lines-in-squarespace-with-no-code
Thanks so much & let me know if this helped!
Alyssa Parr
Squarespace Expert & CEO of Luminescent Dreams | Tutorials | Templates | Portfolio
👩💻 Hire me to build or edit your website: VIP Days | Custom Web Design
alyssa@luminescentdreams.com
@byandreavaldes To hide the vertical line on mobile, you can try adding this code snippet under Custom CSS pan
@media only screen and (max-width: 767px) {
.vertical-line {
display: none !important;
}
}
To transform the vertical line to a horizontal one on mobile, you can try adding this code snippet:
@media only screen and (max-width: 767px) {
.vertical-line {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
}
byandreavaldes got a reaction from Lesum in How can I hide or tweak a vertical line in the mobile version?
