Help to create coloured text boxes or format markdown

Hoping someone can help because I can't seem to achieve what seems like it should be a very simple thing! I'm trying to create an expertise page for a client to showcase their specialties. I'd like it to look similar to the circle landing page (see attached) without the buttons. I have tried three things but none of them are working:

1. Using the auto template for lists. It's almost perfect...except that you can't format bullet points. Again see attached with the red circle. The text doesn't line up correctly and it looks a bit amateurish to me to leave it this way.
2. Using a poster. Unfortunately due to the amount of text, the alignment goes totally out of wack on different screen sizes (also attached), but I can see from the forum search that this is a common issue
3. Using Markdown - after having to tweak site font styles to get this to work (as you can't seem to change the paragraph size), this seemed promising but laying out three columns has become a challenge, again see attached. Plus I will need two rows of 3 boxes and I'm not sure I will be able to get them to line up correctly.

Any ideas or suggestions on how I could make this work would be much appreciated!!

TIA

22 hours ago, paul2009 said:

I'd create the content in a collection - such as a Blog collection - and then use a Summary Block to render the content on the page. In this way, the Summary Block (and the Squarespace LayoutEngine) are taking care of the layout instead of you. For example:

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

You are a saviour! Great workaround. I can't for the life of me figure out how your formated the block colours though? The first is the collection page which I thought I could use instead, and the second is a regular page with the summary block as a grid and using the excerpt function to show the text. But I can't seem to change the design on this. 

On the Summary Block page, I'd use something like this:

/* Summary Block Style Changes */
/* Use the Collection ID of the specific page */
#collection-xxxxxxxxxxxxxxx {
  .content-wrapper {
	background: #ddd;
  }
  .sqs-block-summary-v2 .summary-content {
    background: #fff;
    padding: 17px;
  }
  .sqs-block-summary-v2 .summary-title {
    font-size: 1.3em;
  }
}

Note that this was on a Squarespace 7.1 site where xxxxxxxxxxxxxxx is the ID of the page containing the Summary Block. To apply this to all pages, remove the first functional line ('#collection...') and last line ('}') .

On 10/28/2021 at 2:07 PM, jenq said:

You are a saviour! Great workaround. I can't for the life of me figure out how your formated the block colours though? The first is the collection page which I thought I could use instead, and the second is a regular page with the summary block as a grid and using the excerpt function to show the text. But I can't seem to change the design on this. 

If you share link to this page, we can check & give exact code

On 10/28/2021 at 8:21 PM, paul2009 said:

On the Summary Block page, I'd use something like this:

/* Summary Block Style Changes */
/* Use the Collection ID of the specific page */
#collection-xxxxxxxxxxxxxxx {
  .content-wrapper {
	background: #ddd;
  }
  .sqs-block-summary-v2 .summary-content {
    background: #fff;
    padding: 17px;
  }
  .sqs-block-summary-v2 .summary-title {
    font-size: 1.3em;
  }
}

Note that this was on a Squarespace 7.1 site where xxxxxxxxxxxxxxx is the ID of the page containing the Summary Block. To apply this to all pages, remove the first functional line ('#collection...') and last line ('}') .

Thanks again! I'm almost there, just one last question. I can't get the font size on the bullet points to match the paragraph text. See attached screenshot along with the code below, can you see where I am going wrong? Also, it seems like the background to my footer is now missing too!

//remove underlines from hyperlinks//

.sqs-block-html a {background-image:none!important}

/* Remove non-background image underline for heading and paragraph links */
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important}

/* Summary Block Style Changes */
/* Use the Collection ID of the specific page */
#collection-615cd0bcd9bfbe1b6ee1c655 {
  .content-wrapper {
    background: #fff;
  }
  .sqs-block-summary-v2 .summary-content {
    background: #D1D3D6;
    padding: 30px; 
  }
  .sqs-block-summary-v2 .summary-title {
    font-size: 1.8em; color: #0e3a77
  }
  p {
  font-size: 1em;
}
  ul {font-size: 1em;
  }
}

I managed to work the footer issue out. Posting here for anyone that might find this useful. Instead of using the collection id in the code, use the section data id code instead.