Jump to content

Change font size of Related Products title 'Things You Might Like'

Recommended Posts

Posted

Needs Custom CSS unless you'll wanna change all H2 headings.
 

This is the fluid type Squarespace uses:

@media screen and (min-width: 1296px){
h2.ProductItem-related-label {
    font-size: ~"calc(2.2 * 1rem)";
}
}

width: 1295px) and (orientation: portrait){
h2 {
    font-size: ~"calc((2.4 - 1) * 1.2vh + 1rem)";
}
}



change the 2.2 and 2.4 to different numbers do make it bigger and smaller for mobile and desktop respectively

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

  • 1 month later...
Posted

This is great, thank you! 

Can you tell me how I can do the same for the 'Review' title I've added in Additional Info, which sits above an Elfsight review plugin code? 

 

I'd also like to reduce the space between the image/Add to Cart button and Review if possible? 

 

 

 

 

Screenshot 2022-03-21 at 15.19.42.png

Posted
16 hours ago, DreamrW said:

This is great, thank you! 

Can you tell me how I can do the same for the 'Review' title I've added in Additional Info, which sits above an Elfsight review plugin code? 

 

I'd also like to reduce the space between the image/Add to Cart button and Review if possible? 

 

 

 

 

Screenshot 2022-03-21 at 15.19.42.png

Add to Design > Custom CSS

/* reviews size space */
div#block-yui_3_17_2_1_1647790209626_12596 p {
    font-size: 30px;
}
div#block-yui_3_17_2_1_1647598708061_10629, div#block-yui_3_17_2_1_1643052692317_4499, div#block-yui_3_17_2_1_1642502852889_46950 {
    padding: 0px;
}
section.ProductItem-additional {
    margin-top: 5px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 weeks later...
Posted
On 3/22/2022 at 7:35 AM, tuanphan said:

Add to Design > Custom CSS

/* reviews size space */
div#block-yui_3_17_2_1_1647790209626_12596 p {
    font-size: 30px;
}
div#block-yui_3_17_2_1_1647598708061_10629, div#block-yui_3_17_2_1_1643052692317_4499, div#block-yui_3_17_2_1_1642502852889_46950 {
    padding: 0px;
}
section.ProductItem-additional {
    margin-top: 5px !important;
}

 

This is super, thank you! I want to add the same code block and styling on all product pages - what do I need to adjust to ensure the CSS applies to all product pages? 

Posted
On 4/6/2022 at 9:49 PM, DreamrW said:

This is super, thank you! I want to add the same code block and styling on all product pages - what do I need to adjust to ensure the CSS applies to all product pages? 

Add this to Design > Custom CSS

section.ProductItem-additional {
    margin-top: 5px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted
On 7/21/2023 at 4:25 AM, happydayspickleball said:

can someone help me change the "You might also like" fonts on my product pages? 

 

http://www.happydayspickleball.com

password: Woogies311

I don't see You might also like. Can you check it again?

https://www.happydayspickleball.com/shop-all/p/heat-wave-paddle

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.