Jump to content

changing product category font size in shop page

Recommended Posts

Site URL: https://www.kelseyrodriguez.com/shop

Hello everyone! 

I've combed the forums and tried a few different iterations of code and am struggling to change the font size of my product categories on mobile. On my site (no password) kelseyrodriguez.com/shop, the product categories don't scale down in mobile view (see attached photo) leading to a lot of unwanted horizontal overflow.

I'd love some code to make these product categories scale down, or even just break into two lines, but I don't know the specific tag to target. 

Any help would be great! Thanks in advance!

Screen Shot 2020-11-06 at 10.54.26 PM.png

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
li.nested-category-breadcrumb-list-item * {
    font-size: 12px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
  • 1 month later...
13 hours ago, Funjob said:

Thanks, Tuanphan, but I figured it out. Although, while you're here could you tell me how to change the font on the "subtotal" heading on the cart screen?

https://www.underhereyes.com/cart

Password: Eyeballs827701058_Subtotalfont.thumb.png.bf8a2c5a68746c6ede510ea471f1270a.png

 

font name, font color, size or..?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 11/10/2020 at 10:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
li.nested-category-breadcrumb-list-item * {
    font-size: 12px;
}
}

 

@tuanphan Thanks so much this exactly what i needed right now...how would I go about centering the now smaller text?

Link to comment
On 1/30/2023 at 1:12 PM, c0pp0 said:

@tuanphan Thanks so much this exactly what i needed right now...how would I go about centering the now smaller text?

Try this. If it doesn't work, please share link to your site

@media screen and (max-width:767px) {
li.nested-category-breadcrumb-list-item * {
    font-size: 12px;
	text-align: center !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

I'm trying to target the shop category font on my site, to change the font color.

Any ideas?

I picked this code up elsewhere and it changes the font, just not the color:

 

.collection-type-products .ProductItem-details,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children
{
  font-family : 'quincy-cf';
  font-size: 18px;
  font-color: blue !important;
  letter-spacing: 0.03rem;
}

Thanks.

 

https://thehomecollectivecomau.squarespace.com/

pword: Thehomecollective

Screenshot 2023-03-20 at 2.45.01 pm.png

Link to comment
On 3/20/2023 at 10:45 AM, markadekoning said:

I'm trying to target the shop category font on my site, to change the font color.

Any ideas?

I picked this code up elsewhere and it changes the font, just not the color:

 

.collection-type-products .ProductItem-details,
.ProductItem-nav-breadcrumb,
body:not( .button-style-default ) .sqs-add-to-cart-button,
.nested-category-children
{
  font-family : 'quincy-cf';
  font-size: 18px;
  font-color: blue !important;
  letter-spacing: 0.03rem;
}

Thanks.

 

https://thehomecollectivecomau.squarespace.com/

pword: Thehomecollective

Screenshot 2023-03-20 at 2.45.01 pm.png

With color, use this

a.nested-category-breadcrumb-link {
    color: #f1f !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.