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

Vertical lines between each card in a 'Summary' block

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!

Share this post


Link to post

8 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!

 

 

Share this post


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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

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