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 (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@maggiec you mean text color or background color?


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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 (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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 (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

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

with

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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 (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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
  • 0

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@maggiec


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



Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

No Such AccountThe account you requested does not exist


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

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