Product Title's Font Style & Size on Product Page

Site URL: https://www.edxulondon.com/shop/p/tears-marquise-ring

Hi All,

Is anyone able to advise me how to change the 2nd line of the Product title from H2 to P2? Basically the Title is broken into 2 lines by a line breaker 'I'. I want the 1st line to be in H2, and 2nd line to be in P2.

Please see the attachment for the example, and the title for this page is 'TEARS MARQUISE RING | Gold Vermeil & Rhodium Plated Silver'

Thanks for anyone would could help!

Ed

We can't target second line. However we can change both first + second line. Then use another code to change first line, thus, both will have different style.

Add to Design > Custom CSS

/* Second Line + First Line */
h1.ProductItem-details-title {
    font-family: proxima-nova !important;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em !important;
}
/* first line */
h1.ProductItem-details-title:first-line {
    font-family: Philosopher;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: none;
    line-height: .9em;
}

5 hours ago, tuanphan said:

We can't target second line. However we can change both first + second line. Then use another code to change first line, thus, both will have different style.

Add to Design > Custom CSS

/* Second Line + First Line */
h1.ProductItem-details-title {
    font-family: proxima-nova !important;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em !important;
}
/* first line */
h1.ProductItem-details-title:first-line {
    font-family: Philosopher;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: none;
    line-height: .9em;
}

 

This works like a charm! Thank you so much!! 

On 12/23/2021 at 8:02 AM, tuanphan said:

We can't target second line. However we can change both first + second line. Then use another code to change first line, thus, both will have different style.

Add to Design > Custom CSS

/* Second Line + First Line */
h1.ProductItem-details-title {
    font-family: proxima-nova !important;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em !important;
}
/* first line */
h1.ProductItem-details-title:first-line {
    font-family: Philosopher;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: none;
    line-height: .9em;
}

 

Hi hope you are well. I am wondering if it's possible to adjust the font size of the second line? I would like to make it smaller, could you advise?

21 minutes ago, Edwardxu said:

Hi hope you are well. I am wondering if it's possible to adjust the font size of the second line? I would like to make it smaller, could you advise?

set font size for first code (it will set for first line + second line)

next, set font size for second code (it will set for first line)

The code uiwll be like this

/* Second Line + First Line */
h1.ProductItem-details-title {
    font-family: proxima-nova !important;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em !important;
font-size:20px;
}
/* first line */
h1.ProductItem-details-title:first-line {
    font-family: Philosopher;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: none;
    line-height: .9em;
font-size: 30px;
}

3 hours ago, tuanphan said:

set font size for first code (it will set for first line + second line)

next, set font size for second code (it will set for first line)

The code uiwll be like this

/* Second Line + First Line */
h1.ProductItem-details-title {
    font-family: proxima-nova !important;
    font-weight: 300 !important;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em !important;
font-size:20px;
}
/* first line */
h1.ProductItem-details-title:first-line {
    font-family: Philosopher;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .09em;
    text-transform: none;
    line-height: .9em;
font-size: 30px;
}

 

Thanks for the new code. At the moment, I can only adjust the first line of the title by changing the size for the second code. I want to make the second line of the title smaller (almost same size as the product description), It does not seems to be working by changing the font size in the first code. Could you help?

you used

Quote

  font-size: 10px;

adding !important after 10px, the code should be

  font-size: 10px !important;