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



You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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



You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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



You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

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