Jump to content

Vertical lines between each card in a 'Summary' block

Recommended Posts

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 comment
  • Replies 27
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

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 comment

@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 comment
  • 4 months later...
12 hours ago, amandaray91 said:

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.