Jump to content

2 column bullet point list

Recommended Posts

Site URL: https://blenny-daffodil-5dzg.squarespace.com/

I want to make a 2 column bullet point list without editing any other text on the site or around the bullet list. On the site the third banner on the intro page with a bridge for a background. Second group of text has a list of bullets that is what I want to become 2 columns and to in the future be able to change or add the content of the bullets.

Link to comment

The basic effect begins with a text block, line block, text block, line block text block.

1174540356_ScreenShot2021-07-21at10_30_49PM.thumb.png.6547c3079e7065408644399752e5a1b9.png

Then drag the bottom text block to the right of the middle text block. Notice the blue insertion line. It is critical that the line be small and close the right of the middle text block. Make the wrong insertion and the effect won't work.

911831551_ScreenShot2021-07-21at10_31_58PM.thumb.png.eb5641ef4b055352abe40e590b296f23.png

Here we see the bottom text block now in place.

1522390234_ScreenShot2021-07-21at10_32_30PM.thumb.png.30d6db2b6ea19212f3922013ecc103d3.png

When the text blocks are in the proper layout remove the line blocks.

1681385480_ScreenShot2021-07-21at10_34_27PM.thumb.png.ff3e9740e8ffeb12527a60acac01e928.png

The line blocks are important at first for keeping the text blocks from combining together unexpectedly.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 years later...

Thanks for your reply

https://playbook-nth.squarespace.com/overview pw NTH2024#

#block-9b5a8b77fa0af9199329

/*2 COLUMNS on desktop/tablet*/
@media screen and (min-width: 640px) {
  .fe-block-9b5a8b77fa0af9199329 {
    column-count: 2;
    column-gap: 60px;
  }
}

I have managed to achieve it with the above code, but having problems with not being able to make text block shorter. The blue outline in the screenshot is the closest I can move the bottom of text block to the text inside.

Screen Shot 2024-04-02 at 7.18.45 PM.png

Link to comment
On 4/3/2024 at 6:23 AM, hansworks said:

Thanks for your reply

https://playbook-nth.squarespace.com/overview pw NTH2024#

#block-9b5a8b77fa0af9199329

/*2 COLUMNS on desktop/tablet*/
@media screen and (min-width: 640px) {
  .fe-block-9b5a8b77fa0af9199329 {
    column-count: 2;
    column-gap: 60px;
  }
}

I have managed to achieve it with the above code, but having problems with not being able to make text block shorter. The blue outline in the screenshot is the closest I can move the bottom of text block to the text inside.

Screen Shot 2024-04-02 at 7.18.45 PM.png

Page doesn't work now. Can you check it again?

image.thumb.png.2d096da75162906c3bb9a45c7d37a07e.png

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 4/10/2024 at 10:22 PM, hansworks said:

Hello again and thanks for your patience. I have created a copy so that you can look at it without it changing.

https://playbook-nth.squarespace.com/role-responsibility-copy

PW: NTH2024#

Now you want to reduce this space?

image.thumb.png.4cc81222172da411ecb5f2c3778619f7.png

You can use this code to Website > Website Tools > Custom CSS

/* Space under text */
.fe-6616ad5d281a48227f8ba778 {
    grid-template-rows: repeat(45,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

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.