Jump to content

Creating a color block section

Recommended Posts

  • Replies 8
  • Views 2k
  • Created
  • Last Reply

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.

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

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>

 

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
  • 3 weeks later...
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)

Link to comment
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>

 

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
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? 

image.thumb.png.3e856aa1b4c7e1323caeb54c0e329a55.png

Link to comment
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? 

image.thumb.png.3e856aa1b4c7e1323caeb54c0e329a55.png

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>

 

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 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?

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.