Jump to content

Background colour - Block section

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
6 hours ago, obourne1016 said:

Site URL: https://antelope-octagon-t69s.squarespace.com/joyful-living

Hi, there, 

I'm trying to change a background colour block on my website. 

This section in question. 
https://antelope-octagon-t69s.squarespace.com/joyful-living
 

To something similar attached. 

 

Password: Fostex1722!

 

Many thanks, 

Oliver

 

Screenshot 2020-12-02 at 21.47.20.png

Screenshot 2020-12-02 at 21.49.54.png

You may want to use different images with transparent color, please copy this custom css

#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row {
  background: #d48994;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 {
  padding: 5%;
  padding-bottom: 2%;
  box-sizing: border-box;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-image .image-card-wrapper {
  padding-bottom: 50px !important;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-button {
  position: relative;
  top: -50px;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:first-child {
  padding-right: 0;
  padding-left: 10%;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:last-child {
  padding-left: 0;
  padding-right: 10%;
}

image.thumb.png.d07794549fa95a0a8ce016ce9ef68d2e.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
18 hours ago, bangank36 said:

You may want to use different images with transparent color, please copy this custom css





#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row {
  background: #d48994;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 {
  padding: 5%;
  padding-bottom: 2%;
  box-sizing: border-box;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-image .image-card-wrapper {
  padding-bottom: 50px !important;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4 .sqs-block-button {
  position: relative;
  top: -50px;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:first-child {
  padding-right: 0;
  padding-left: 10%;
}
#block-yui_3_17_2_1_1605973710411_27115 + .sqs-row .span-4:last-child {
  padding-left: 0;
  padding-right: 10%;
}

image.thumb.png.d07794549fa95a0a8ce016ce9ef68d2e.png


@bangank36 -  Thanks for your help on this. Just wanted if you help further on this. Is possible to add a white stoke around the content cards? Also how I make sure its aligned in the centered on mobile.

Many thanks,

Oliver

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.