Jump to content

Customise image card title

Recommended Posts

Site URL: https://www.qualitycupofcoffee.com

Hello everyone !

Hope you had a fine week so far. I have been postponing on creating my blog area and I finally decided to get it done. I have two minor coding issue so far:

1. Image card
As you can see at the bottom of my blog template page, I am trying to create 2 images card that will refer to my newest and oldest post.
- I would love to get the title and subtitle white, however I am unable to make the change appear.
- I want my text alignment to match my picture. For the left image card I wish to have my text aligned on the left and for the right one, aligned on the right.
- I would like to have a pink gradient line that appear under the image card title. ( just like here : www.qualitycupofcoffee.com/blog-eng ) I am not sure what to write in      my coding to make it happens.

/*image card for blog*/

.image-title-wrapper {
  text-align: match !important;
  color: white !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #f5ad9e 65%);

2. Archive block
I coded something to have pink bullet point on my website, however I am not quite sure why it also affects my archive block list. Any idea? See the dropdown menu called "categorie" on the top of the page. www.qualitycupofcoffee.com/blog-eng

Let me know 🙂


Link to comment
  • Replies 1
  • Created
  • Last Reply

1. Which image cards? Can you take a screenshot?

2. Edit this line


ul li:before

to thí


ul.archive-group-list li:before


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment


This topic is now archived and is closed to further replies.

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