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

Vertical lines between each card in a 'Summary' block


katiapase

Question

Site URL: https://cinnamon-kangaroo-8d9s.squarespace.com/

Hi there,

I'd like to add vertical lines to border the individual cards in a 'Summary' block.

I want to apply this to two scenarios:

  1. A row of cards with image stacked on top of title: vertical line should appear between each card.
  2. Single full-width card with image left and title right (desktop only): vertical line should appear between the image and the title (halfway point of screen).

In both scenarios the vertical line should meet the horizontal lines I've placed top and bottom of the summary blocks.

This is the type of effect I'm trying to achieve: https://sometimesalways.com.au/

My WIP site: https://cinnamon-kangaroo-8d9s.squarespace.com/ PW: Cardinal321

 THANKS!

Link to post
  • Answers 24
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@katiapase It'll depend on what blocks you use on the page, especially if you're wanting to have the borders be consistent across all the blocks on the page.  I would put all the elements that you'

@katiapase, is this the effect you're going for?  

@katiapase yes I figured, that would require quite a few overrides to achieve the same effect. Because you have to account for the borders on multiple columns/elements and also the spacing to ensure t

Posted Images

24 answers to this question

Recommended Posts

  • 0

Hi @RyanDejaegher and @derricksrandomviews yes that's approximately what I'm looking for, but I want the vertical lines to extend to meet the full-width horizontal lines at the top and bottom of the row of cards, and no outer border visible on the left and right of the row.

The 'Fresh Produce' component here is a perfect example: https://sometimesalways.com.au/

I tried both the suggested solutions and can't figure out how to extend the length of the line beyond the length of the card.

Thanks for the help so far!

 

 

Link to post
  • 0

@katiapase yes I figured, that would require quite a few overrides to achieve the same effect. Because you have to account for the borders on multiple columns/elements and also the spacing to ensure that any existing text/elements aren't bumping up against the border. 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0

@katiapase It'll depend on what blocks you use on the page, especially if you're wanting to have the borders be consistent across all the blocks on the page. 

I would put all the elements that you're going to use on the page first and then revisit

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0
On 11/7/2020 at 2:06 AM, amandaray91 said:

 how could i get this border line on a grid gallery but only in between the right and left of each image?

If you share link to grid gallery, we can help easier

Link to post
  • 0
12 hours ago, amandaray91 said:

Add to Home > Design > Custom CSS

.homepage .slide a {
    border-left: 1px solid red;
    border-right: 1px solid red;
}

 

Link to post
  • 0

@tuanphan

thank you so much for this! i did it so that it's:

.homepage .slide a {
    border-right: 1px solid black;
}

 

but i want to push the actual black line so that it's evenly in the between each image.
your help is much much appreicated!

Link to post
  • 0
7 hours ago, amandaray91 said:

@tuanphan

thank you so much for this! i did it so that it's:

.homepage .slide a {
    border-right: 1px solid black;
}

 

but i want to push the actual black line so that it's evenly in the between each image.
your help is much much appreicated!

I don't quite understand. Do you still need help? If yes, can you clarify this?

Link to post
  • 0
6 hours ago, tuanphan said:

I don't quite understand. Do you still need help? If yes, can you clarify this?

Yes! @tuanphan - i would love to push the actual lines now to b e in between each image like the image attached.

Screen Shot 2020-11-12 at 9.35.39 AM.png

Link to post
  • 0
On 11/12/2020 at 10:36 PM, amandaray91 said:

Yes! @tuanphan - i would love to push the actual lines now to b e in between each image like the image attached.

Can you check again site url? We can't access it.

Link to post
  • 0
11 hours ago, amandaray91 said:

@tuanphan it should be https://optimiststudios.squarespace.com/ & the password is password!

password!

Incorrect password

Link to post
  • 0
4 hours ago, amandaray91 said:

@tuanphan sorry -it should be

 

https://optimiststudios.squarespace.com/ 

 

password is: password

 

 

Edit to this code

.homepage .slide a {
    border-right: 1px solid #000;
    padding-right: 15px;
}

 

Link to post
  • 0
On 12/1/2020 at 8:58 PM, Sera said:

Hello, I'd love to get some help in a similar approach if possible! 🙂

I've been looking into a way to place a vertical line placed in between the image + text block, particularly for this page:

https://tangerine-iguana-kwg3.squarespace.com/classes

In between Strength + Stability text area + image on the right, as well as the lower sections. 

Would greatly appreciate the help on this,

S.

 

Answered in another 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...