Creating a color block section

I am trying to create a color block section on a squarespace site similar to the attached screenshot. Any ideas how to make that happen?

In general I'd start by trying image blocks using the Stack design. Then I'd probably try some CSS to color the backgrounds.

If that didn't work out I'd try to set up a page section with the content divided up into columns using a mix of image and text blocks. SS uses a 12 column layout.

You can try adding this Code Block >> Then share link to page where you added, we will tweak the code to achieve screenshot layout.

<div class="box1">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box4">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box5">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>

On 6/14/2021 at 4:51 AM, tuanphan said:

You can try adding this Code Block >> Then share link to page where you added, we will tweak the code to achieve screenshot layout.

<div class="box1">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box4">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>
<div class="box5">
<img src="https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg" width="50px"/>
<h2>Sale of the Business/Advisory</h2>
<p>The key to selling your business is to have the right advisors.</p>
<p><a href="https://squarespace.com">Read more</a></p>
</div>

 

@tuanphan - I added that to this page https://koala-grape-9rm8.squarespace.com/services (use p4ssword to view)

21 hours ago, Sienawalker said:

@tuanphan - I added that to this page https://koala-grape-9rm8.squarespace.com/services (use p4ssword to view)

Add to Code Block

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: flex-start;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
</style>

4 hours ago, tuanphan said:

Add to Code Block

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: flex-start;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
</style>

 

This worked, but is there a way to get them all to be the same height/fill the full vertical space of the container? 

17 hours ago, Sienawalker said:

This worked, but is there a way to get them all to be the same height/fill the full vertical space of the container? 

Remove height 800px code & use this new code

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: stretch;
   flex-wrap: wrap;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
  @media screen and (max-width:991px) {
  .box1, .box2, .box3, .box4 {
    width: 50%;
}
  }
  @media screen and (max-width:767px) {
  .box1, .box2, .box3, .box4 {
    width: 25%;
}
  }
</style>

On 7/3/2021 at 2:53 AM, tuanphan said:

Remove height 800px code & use this new code

<style>
  [data-section-id="60dda2258ae2570c0c0fc1ea"] .content-wrapper {
    padding: 0 !important;
    max-width: 100%;
}
  html, body {overflow-x: hidden;}
 div#block-yui_3_17_2_1_1625137690367_11288>div {
    display: flex;
    align-items: stretch;
   flex-wrap: wrap;
}
  .box1, .box2, .box3, .box4 {
    width: 25%;
    text-align: center;
}
  .box1 h2, .box2, h2, .box3 h2, .box4 h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.5rem !important;
}
  /* box 1 */
  .box1 {
    background: #122050;
}
  /* box 2 */
  .box2 {
    background: #5c6c7e;
    margin-top: 0;
}
  /* box 3 */
  .box3 {
    background: #7aa2b9;
}
  /* box 4 */
  .box4 {
    background: #7aa2b9;
}
  @media screen and (max-width:991px) {
  .box1, .box2, .box3, .box4 {
    width: 50%;
}
  }
  @media screen and (max-width:767px) {
  .box1, .box2, .box3, .box4 {
    width: 25%;
}
  }
</style>

 

Thanks! Last question, how do I get the content to be centered in the color block?

19 hours ago, Sienawalker said:

Thanks! Last question, how do I get the content to be centered in the color block?

Hi. It looks centered here?

Screenshot: https://prnt.sc/18p4vnz