Jump to content

How can I hide or tweak a vertical line in the mobile version?

Go to solution Solved by Lesum,

Recommended Posts

  • Solution

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

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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: 

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

Edited by luminescentdreams
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.