Subheadings with different font size on portfolio

Site URL: https://fox-chihuahua-df3j.squarespace.com/

Hi, does anyone know how to change the font size and colour when putting subheadings in a portfolio block? I followed another tutorial to put subheadings in but I dont know how to customise it further. What I have is on the left, and what I want is on the right. Thanks!

Add to Design > Custom CSS

h3.portfolio-title:after {
    font-size: 18px;
    color: red;
}

Hi!

I tried it out and it looks like this:

It's made both rows pink, but i only want the 'UX/UI design' to be pink. Heres the code I currently have:

h3.portfolio-title:after {
    font-size: 16px;
    color: black;
    display: block;
    white-space: pre-wrap;
}
h3.portfolio-title:after {
    font-size: 18px;
    color: #cf347f;
}
a.grid-item[href="/projects/hatch"] h3:after {
    content: "UX/UI design \A Improving productivity through simplified task management";
}
a.grid-item[href="/projects/tumblrmobile"] h3:after {
    content: "UX/UI design \A Faciliating content creation, retrieval, and discovery";
}

You mean

You want title appears in 3 line

first is black

second is pink

third is black

Is this right?

4 hours ago, tuanphan said:

You mean

You want title appears in 3 line

first is black

second is pink

third is black

Is this right?

Yes! If it's possible, the pink line has a smaller font size than the black lines 🙂

sorry, is there any update to this? i'm in a bit of a rush 😞

On 9/12/2022 at 3:31 PM, paraselene said:

sorry, is there any update to this? i'm in a bit of a rush 😞

Sorry. Just had some travelling day.

Do you use Personal or Business Plan? Each plan will have a different solution

If you use a Business Plan or higher, follow these steps

1. Edit title to this format: Hatch <em>UX/UI design</em><em>Improving productivity through simplified task management</em>
2. Next, I will give the code to change color

This way, it will appear in both the Pagination Title, Browser Tab, and possibly Google Search Result.

If you use Personal Plan, let me know, I think I will give another approach using :after, :before, like the way you added small text

6 hours ago, tuanphan said:

Do you use Personal or Business Plan?

No worries about travelling, i'm glad you're helping me out in the first place 🙂

I'm on a personal plan!

Try adding this CSS

/* first project */
a.grid-item[href="/projects/hatch"] {
h3:before {
    content: "UX/UI Design";
    display: block;
    position: absolute;
    top: 30px;
    color: pink;
    font-size: 15px;
    white-space: nowrap;
}
h3:after {
    content: "Improving productivity through simplified task management";
    position: absolute;
    top: 60px;
    width: 100%;
    white-space: nowrap;
}
h3.portfolio-title {
    position: absolute;
    top: 0;
}}
h3.portfolio-title:after {
    font-family: aktiv-grotesk;
    font-size: 16px;
    line-height: 1.8em;
    color: #000;
    display: block;
    white-space: pre-wrap;
}

On 9/18/2022 at 5:47 PM, tuanphan said:

Try adding this CSS

/* first project */
a.grid-item[href="/projects/hatch"] {
h3:before {
    content: "UX/UI Design";
    display: block;
    position: absolute;
    top: 30px;
    color: pink;
    font-size: 15px;
    white-space: nowrap;
}
h3:after {
    content: "Improving productivity through simplified task management";
    position: absolute;
    top: 60px;
    width: 100%;
    white-space: nowrap;
}
h3.portfolio-title {
    position: absolute;
    top: 0;
}}
h3.portfolio-title:after {
    font-family: aktiv-grotesk;
    font-size: 16px;
    line-height: 1.8em;
    color: #000;
    display: block;
    white-space: pre-wrap;
}

 

the code works! except on mobile view the spacing is incorrect. do you know how to fix the spacing on mobile?

14 hours ago, paraselene said:

 

the code works! except on mobile view the spacing is incorrect. do you know how to fix the spacing on mobile?

Try this new code

a.grid-item[href="/projects/hatch"] {
h3:before {
    content: "UX/UI Design";
    display: block;
    position: absolute;
    top: 30px;
    color: pink;
    font-size: 15px;
    white-space: nowrap;
}
h3:after {
    content: "Improving productivity through simplified task management";
    position: absolute;
    top: 60px;
    width: 100%;
    white-space: nowrap;
}
h3.portfolio-title {
    position: absolute;
    top: 0;
}}
h3.portfolio-title:after {
    font-family: aktiv-grotesk;
    font-size: 16px;
    line-height: 1.8em;
    color: #000;
    display: block;
    white-space: pre-wrap;
}
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-row-gap: 150px;
}
}

13 hours ago, tuanphan said:

Try this new code

super close! it's nearly correct except the text isnt wrapping properly underneath the portfolio image so it's overlapping other text or going off the screen

Try this

a.grid-item[href="/projects/hatch"] {
h3:before {
    content: "UX/UI Design";
    display: block;
    position: absolute;
    top: 30px;
    color: pink;
    font-size: 15px;
    white-space: nowrap !important;
}
h3:after {
    content: "Improving productivity through simplified task management";
    position: absolute;
    top: 60px;
    width: 100%;
    white-space: nowrap;
}
h3.portfolio-title {
    position: absolute;
    top: 0;
}}
h3.portfolio-title:after {
    font-family: aktiv-grotesk;
    font-size: 16px;
    line-height: 1.8em;
    color: #000;
    display: block;
    white-space: pre-wrap;
}
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-row-gap: 150px;
}
h3:after {
    white-space: initial !Important;
}
}

On 9/23/2022 at 5:53 PM, tuanphan said:

Try this

a.grid-item[href="/projects/hatch"] {
h3:before {
    content: "UX/UI Design";
    display: block;
    position: absolute;
    top: 30px;
    color: pink;
    font-size: 15px;
    white-space: nowrap !important;
}
h3:after {
    content: "Improving productivity through simplified task management";
    position: absolute;
    top: 60px;
    width: 100%;
    white-space: nowrap;
}
h3.portfolio-title {
    position: absolute;
    top: 0;
}}
h3.portfolio-title:after {
    font-family: aktiv-grotesk;
    font-size: 16px;
    line-height: 1.8em;
    color: #000;
    display: block;
    white-space: pre-wrap;
}
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-row-gap: 150px;
}
h3:after {
    white-space: initial !Important;
}
}

 

sorry, it doesn't really work 😕 it jumps to the next line too quickly