Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating a color block section


Sienawalker

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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