Guest Posted June 18, 2020 Share Posted June 18, 2020 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: A row of cards with image stacked on top of title: vertical line should appear between each card. 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
derricksrandomviews Posted June 18, 2020 Share Posted June 18, 2020 (edited) Here are two tutorials on how to make vertical lines. https://thirtyeightvisuals.com/blog/vertical-lines-squarespace https://www.minimist.ca/articles/how-to-make-a-vertical-line-in-squarespace Edited June 18, 2020 by derricksrandomviews Link to comment
Guest Posted June 18, 2020 Share Posted June 18, 2020 Thanks @derricksrandomviews – those tutorials show you how to add freestanding vertical lines via new code blocks, which I'm across, however I need to create these lines within the existing Squarespace blocks. Link to comment
derricksrandomviews Posted June 18, 2020 Share Posted June 18, 2020 .sqs-block-summary-v2 .summary-item { border-right: 4px solid #000000; } Link to comment
RyanDejaegher Posted June 18, 2020 Share Posted June 18, 2020 @katiapase, is this the effect you're going for? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Guest Posted June 21, 2020 Share Posted June 21, 2020 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
RyanDejaegher Posted June 22, 2020 Share Posted June 22, 2020 @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 response: https://m.me/dejaegherryan Link to comment
Guest Posted June 22, 2020 Share Posted June 22, 2020 @RyanDejaegher any idea what the overrides would be? Link to comment
RyanDejaegher Posted June 22, 2020 Share Posted June 22, 2020 @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 response: https://m.me/dejaegherryan Link to comment
amandaray91 Posted November 6, 2020 Share Posted November 6, 2020 On 6/18/2020 at 9:15 AM, RyanDejaegher said: @katiapase, is this the effect you're going for? how could i get this border line on a grid gallery but only in between the right and left of each image? Link to comment
tuanphan Posted November 10, 2020 Share Posted November 10, 2020 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 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
amandaray91 Posted November 10, 2020 Share Posted November 10, 2020 @tuanphan https://buffalo-fish-9zyd.squarespace.com/ password is password Link to comment
tuanphan Posted November 11, 2020 Share Posted November 11, 2020 12 hours ago, amandaray91 said: @tuanphan https://buffalo-fish-9zyd.squarespace.com/ password is password 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
amandaray91 Posted November 12, 2020 Share Posted November 12, 2020 @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 comment
tuanphan Posted November 12, 2020 Share Posted November 12, 2020 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
amandaray91 Posted November 12, 2020 Share Posted November 12, 2020 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. Link to comment
tuanphan Posted November 14, 2020 Share Posted November 14, 2020 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
amandaray91 Posted November 14, 2020 Share Posted November 14, 2020 13 hours ago, tuanphan said: Can you check again site url? We can't access it. It should be https://optimiststudios.squarespace.com/ now 🙂 sorry! Link to comment
amandaray91 Posted November 16, 2020 Share Posted November 16, 2020 @tuanphan it should be https://optimiststudios.squarespace.com/ & the password is password! Link to comment
tuanphan Posted November 17, 2020 Share Posted November 17, 2020 11 hours ago, amandaray91 said: @tuanphan it should be https://optimiststudios.squarespace.com/ & the password is password! password! Incorrect password 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
amandaray91 Posted November 18, 2020 Share Posted November 18, 2020 (edited) On 11/17/2020 at 2:31 AM, tuanphan said: password! Incorrect password sorry - just password there should be no exclamation point @tuanphan Edited November 19, 2020 by amandaray91 Link to comment
amandaray91 Posted November 19, 2020 Share Posted November 19, 2020 @tuanphan sorry -it should be https://optimiststudios.squarespace.com/ password is: password Link to comment
tuanphan Posted November 20, 2020 Share Posted November 20, 2020 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
Sera Posted December 1, 2020 Share Posted December 1, 2020 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. Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment