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

Custom CSS for image card layout


maggiec

Question

Hello,

I have a site that I used image cards within an index to give a certain effect. I was wondering if someone could help me customize the colors on the blocks AND remove the spacing around the image block in between containers.

link to the site: https://pufferfish-piano-xr4r.squarespace.com/config/Home page

The idea is for it to look like the attachment.

screen-shot-2019-07-31-at-20645-pm.png.675f6d4276b9c6a696ff47e513f73926.png

Edited by maggiec
Initial Revision
Link to post
  • Answers 33
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

@maggiec Add to Home > Design > Custom CSS


/* Remove Spacing */
.sqs-block-image {
   padding-bottom: 0 !important;
}
/* Color */
#home-35mm .image-title p {
   color: #fff;
}
/* events */
#home-events .image-title p {
   color: #fff;
}
/* lifestyle */
#home-lifestyle .image-title p {
   color: #fff;
}


You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@maggiec Add to Home > Design > Custom CSS


/* 35 mm */
#home-35mm .sqs-block-image .image-card {
   background: #f1f2f3;
}
/* Events */
#home-events .sqs-block-image .image-card {
   background: #ff0000;
}
/* Lifestyle */
#home-lifestyle .sqs-block-image .image-card {
   background: #f7f8f9;
}


You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@maggiec


@media screen and (max-width:640px) {
/* Padding events */
div#block-0f7e33cac87b8a220270 {
   padding-bottom: 0 !important;
   padding-top: 0 !important;
}
/* Padding 35 mm */
div#block-f5fc82836e8bbfb1081a {
   padding-bottom: 0 !important;
}
/* Padding Life style */
div#block-yui_3_17_2_1_1564451281508_30259 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}
/* Increase Padding Text 3 blocks */
#home-35mm, #home-events, #home-lifestyle {
.image-title.sqs-dynamic-text {
   padding-top: 50px;
   padding-bottom: 50px;
} }
}


You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@tuanphan wow thank you so much

How can I add padding to custom pages?

The About page the copy and image need padding and the shopping cart page, I can't seem to figure out how to pin-point the page.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...