Jump to content

CUSTOMIZE FONT ON GRID TITLE

Recommended Posts

Hello, 

I am trying to change the titles of my grid gallery, I have no experience in CSS. I would like the project number to have a different style and size than the project title. I have attached an image of how I want it to look. Please help 🙂

Screenshot 2023-06-25 at 18.45.13.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

12 hours ago, tuanphan said:

Hi,

Can you share link to this page?

Hi tuanphan, 

the link is:  beagle-sprout-jcp9.squarespace.com

pass: uxuisitebuild2023

Thank you so much!!!

Link to comment

Add to Design > Custom CSS

/* Counter code */
.portfolio-grid-basic .grid-item h3:before {
    content: "0"counter(portfolio-hover-item-counter)".";
    text-transform: uppercase;
    color: red;
}
.portfolio-grid-basic .grid-item {
    counter-increment: portfolio-hover-item-counter;
    position: relative;
}

 

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
21 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Counter code */
.portfolio-grid-basic .grid-item h3:before {
    content: "0"counter(portfolio-hover-item-counter)".";
    text-transform: uppercase;
    color: red;
}
.portfolio-grid-basic .grid-item {
    counter-increment: portfolio-hover-item-counter;
    position: relative;
}

 

Thank you so much it worked!!!! Just one small thing, how do I add a space between the number and the word? I tried to put "right: 30px" after position but it moves the entire portfolio grid.

Screenshot 2023-06-27 at 15.33.16.png

Link to comment

Add padding-right into this code

.portfolio-grid-basic .grid-item h3:before {
    content: "0" counter(portfolio-hover-item-counter) ".";
    text-transform: uppercase;
    color: #000;
    font-size: 50px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ed6b2d;
    padding-right: 20px;
}

 

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

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.