Wrapping text lists that have line dividers without overlapping.

Hello!

I have a layout design consisting of text blocks interspersed with line blocks to create what looks like a ruled list of terms/sentences. It looks fine on large viewports and mobile. But anything in between on smaller screens like laptops and iPads, when the responsiveness does its thing and text lines wrap, they just overlap over the line blocks (rather than the line blocks pushing down to accommodate the text wrapping).  I want the divider lines to "react" to text lines wrapping and unwrapping, accordingly to maintain the ruled list look and spacing. Any ideas on how I could do that? Before and after screen shots attached and URL is above.

Thanks in advance!

_ JV

Can you share your website URL?

Have you got the text blocks overlapping with the line blocks?

Oh, sorry about that! SS has you add a URL in a field when you're writing the post and then doesn't display it, I guess! And yes, I do have the blocks overlapping because I can't manipulate the section grid enough to allow me the best spacing.

Here is the URL: https://www.roseconsulting.co/leadership-coaching

I would suggest tweaking the row and column gap manually in the section settings, reducing the gap should allow more fine control of each of the block row heights.

Thanks for taking a look, Ziggy.

Will that solve the responsive wrapping issues though? Will the line bump downward when a text line wraps onto two lines? I don't want to have to build in a lot of space between the text and the horizontal line for when screen widths allow the text to fit on one line just to accommodate it when it wraps - that will look weird when it fits on one line.

In the meantime, I'll work on tweaking the spacing and see what happens!

If you can control the spacing enough to set up each block to not have an overlap with the one below, you would be able to solve the wrapping issue.

A second solution would be to use code to add in the lines below each text block, removing the need for the line blocks, and avoiding the line wrapping over the line issue.

OK, I will fiddle with the grid/spacing of that particular page section to see what I can get out of it without going to code-based solutions, first.

Thank you! I'll report back.

-J

I went back to the issue and I think I am going to need to go the code injection route to resolve this as you suggested, @Ziggy. Do you know that code injection piece? (When this reolves, I will buy your coffee!)

The reason this is happening (and why I had to overlap text blocks with the line blocks to get the spacing I wanted) is that the grid is not letting the line of text take up any less space than 2 grid rows no matter what I do with spacing. So it is always going to add a grid row below it, forcing me to place the line farther away form the text than I'd like to). Unless I am totally missing something, this seems to be the barrier. See attached screen shots to see. 

...And to add-- even if I choose a smaller type size, the text block it still takes up the height of two grid rows.

Code like this would add a border below each text block on the page, meaning that you don't need the line blocks:

section[data-section-id="6397a0093cf0167b830bf4f9"] {
  .sqs-block-html:not(#block-yui_3_17_2_1_1670785169722_2479543) {
    border-bottom:1px solid #bbb;
  }
}

@ZiggyThank you, that added the line to the text block itself, so the lines wrap with the text!

However, because it insists on adding space below the text in the text block, the spacing between text and lines is less than desired. Is there a way to resolve this text box height issue? (see screenshots for explanation).

Would this setup work better for you:

https://squarefortytwodesign.squarespace.com/dividing-lines

Yes, absolutely. Why Squarespace doesn't have a simple approach to ruled lists is beyond me!

@ZiggyFantastic, thank you! Found your coffee link 😉 Coming soon.

OK, so I made two text blocks with text in each and changed the p to h3. Seems to look great!

Is there anything else needed? On my end, I'll just need to repeat this for the Services pages, adding the 2 block IDs in each to code.

JV

1 hour ago, Javdesign said:

On my end, I'll just need to repeat this for the Services pages, adding the 2 block IDs in each to code.

Yes, just add more block IDs, comma separated, as need.

Thanks for the coffees! Could you mark my post as the solution and give a thumbs up too? Thanks!

All set, thank you!