Jump to content

Background colour - Block section

Recommended Posts

  • Replies 2
  • Views 446
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

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.