CUSTOMIZE FONT ON GRID TITLE

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 🙂

Hi,

Can you share link to this page?

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

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

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.

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