Custom CSS for image card layout

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.

@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;
}

@tuanphan

Thank you but its the background color (the pinkish) i'm looking to change. any idea?

@maggiec you mean text color or background color?

@tuanphan background color

@tuanphan I did just add some custom code but it seemed to mess up the footer, and size poorly in mobile.

@maggiec What is access password?

If your site is private, please setup password & share url.

See how to: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

@tuanphan this site isn't private.https://pufferfish-piano-xr4r.squarespace.com/

@maggiec Private SiteThis site is currently private. If you’re the owner or contributor, log in.

Setup password & share url.Your is in trial so you need to setup password to share url.

@tuanphan so sorry!

https://pufferfish-piano-xr4r.squarespace.com/

password: squarespace

@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;
}

@tuanphan when I tried out lifestyle, it puts a white border band through the text area.

@maggiec replace #home-lifestyle .sqs-block-image .image-card

with

#home-lifestyle .sqs-block-image .image-card-wrapper

@tuanphan thank you!

Any css for eliminating the padding on mobile in between the containers, but increasing side padding for all text and image blocks?

@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;
} }
}

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

@maggiec You need to know HTML / CSS to change padding. What elements of those pages do you want to change padding?

@tuanphan

The whole shopping cart I page I can't edit. And then the image and text box at the top of the about page.

@maggiec How do you want them? Specific description, if a screenshot is good, I will check it correctly and take less time

@tuanphan does this work?

@tuanphan

Actually disregard - I was able to figure out the padding.

@tuanphan Do you know what in mobile view the shop page has a lot of extra spacing within the image card?

@maggiec

@media screen and (max-width:640px) {
.image-card.sqs-dynamic-text-container {
   padding-top: 0 !important;
}
}

@tuanphan do you know why in mobile view, on the home page, the top gallery where it says "Shop Products" is getting cut off?

No Such AccountThe account you requested does not exist