Jump to content

How to change Category Title Font Size?

Go to solution Solved by AlexSan,

Recommended Posts

  • Solution
Posted

@Kieron1102,

Right now, it looks like this is what it is set to. It is in a media query:

@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape)
h2 {
    font-size: calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem);
}

Did you want it to be bigger or smaller? It may be a smart idea to keep the media query to keep the site responsive. However, if you want to edit the font-size yourself, you could try this:

.nested-category-title {
	font-size: 24px !important;
}

However, I suggest doing something like this, if you want it smaller:

@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape)
h2 {
    font-size: calc((var(--heading-3-size-value) - 1) * 1.2vw + 1rem) !important;
}

I am just using the size value of heading 3, which is smaller than heading 2. Or if you want it bigger:

@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape)
h2 {
    font-size: calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem) !important;
}

I am using the size value of heading 1, which is bigger than heading 2.

Posted

The second piece of code you provided worked, just what I am after thank you.

Is it possible to lower the space between my products & the section above the text?

 

image.thumb.png.5d7f9ce9f53db987987f1c9a512366a0.png

Posted

@Kieron1102,

So the top of the header, that is padding in the content wrapper, try adding this:

.products.collection-content-wrapper {
    padding-top: 2vw;
}

For the bottom of the header, try editing .nested-category-title to the following:

.nested-category-title {
	font-size: 35px !important;
	padding-bottom: 2vw;
}

You can play around with the actual values.

  • 11 months later...
Posted

This is the closest thread to my issue, but not exactly. Would you happen to know how to change the font size on the Categories themselves? I want the 11 categories such as "After Birth Control" and "Binders" etc. to appear larger.

Screen Shot 2024-11-21 at 12.10.10 PM.png

Posted
On 11/22/2024 at 1:11 AM, SullyRichard said:

This is the closest thread to my issue, but not exactly. Would you happen to know how to change the font size on the Categories themselves? I want the 11 categories such as "After Birth Control" and "Binders" etc. to appear larger.

Screen Shot 2024-11-21 at 12.10.10 PM.png

Do you have link to this page? We can help easier

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.