Jump to content

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

By byandreavaldes, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

  • Replies 3
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum
Lesum

@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 !importa

luminescentdreams
luminescentdreams

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

byandreavaldes
byandreavaldes

Thank you soo much!

Posted Images

  • Solution
Lesum Level 9

Lesum

Posted
  • Solution
Posted

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

Sam
Web Developer & Digital Designer
☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment
luminescentdreams Level 4

luminescentdreams

Posted
Posted (edited)

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 

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources