Jump to content

CSS to customize text in Image Card Block

Recommended Posts

Hello! 🙂

I was wondering if anyone has a solution for editing the different text portions of the Image Block Card layout.

At first glance, it looks like there's a title, a subtitle (all-caps style), and the option to add a basic description section (paragraph style).

image.thumb.png.e60e701047b57e99d64ab344bdc6d92d.png

The issue when I inspected the code was that the all-caps section and the body section, although automatically styled differently, are both labeled as paragraphs, so any customization affects both sections.

I would like to use CSS to:

  •  Add a subtitle section or find a way to make a distinction between the all-caps section and the body section so that each section can have a different font, font size, and text color.
  • Code these changes to be for just this page versus all Image Block Card layouts. I'm not sure what the proper way is to add the URL slug: yt-section-3 or page ID: #block-yui_3_17_2_1_1701311430473_2002 to the code I currently have.

Here's the code I used to customize the title and all-cap/body section:

/* Image Card layout- title formatting*/
.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title p {
   font-family: 'Chapaza';
   font-weight: 300;
   font-style: normal;
   letter-spacing: 0em;
   text-transform: none;
   line-height: 1.1em;
   color: hsl(156, 89%, 11%);
}

/* Image Card layout- subtitle formatting*/
.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-subtitle p {
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.5em;
    color: #90431E;
  font-size: 13px;
}

Thank you for your help in advance! 

Edited by GMH
forgot to add tags
Link to comment
  • Replies 0
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.