Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Amalie

Coding with vertical lines

Question

 
 
Hi I've been creating a website and managed to find a code to create vertical lines on my site.
 
The code is .vertical-rule { display: block; width: 1px; background: #FFFFFF; height: 5250px; }
 
I love the look on a computer screen but when I go to mobile view the lines block up the other images. I want the lines removed on mobile display but to stay on the computer display.
 
Can anyone help me? 
 
I would be happy to provide my login details. 

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 1
.vertical-rule { display: block; width: 1px; background: #FFFFFF; height: 5250px; }

@media only screen and (max-width: 600px) {
	.vertical-rule { display: none; } 
}

Use @ media to hide them until a set screen width.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...