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

Custom CSS for image card layout

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

Share this post


Link to post

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



 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

@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

Edited by tuanphan
Initial Revision

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


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



 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


Link to post
  • 0

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

Share this post


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



 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31 for Lunar New Year.

Share this post


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.

Share this post


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