Jump to content

How to change Product Title Text Size on mobile view only

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.wedoaesthetic.com/

Hello,  I need to change the Product Title Text Size - only on mobile view and make it smaller ( and the price a bit bigger). Can you help me? I tried already this code on custom CSS but I can't find a way to apply the change to the Product Title. 

This is my website

https://www.wedoaesthetic.com/

 

this code that i tried but something is off and it's not working

@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 0.5rem;
}
  #productList .product .product-title {
    font-size: 0.5px !important;
}}

 

Hope someone will help me,

thank you!

Link to comment
  • Solution
10 minutes ago, wedoaesthetic said:

Site URL: https://www.wedoaesthetic.com/

Hello,  I need to change the Product Title Text Size - only on mobile view and make it smaller ( and the price a bit bigger). Can you help me? I tried already this code on custom CSS but I can't find a way to apply the change to the Product Title. 

This is my website

https://www.wedoaesthetic.com/

 

this code that i tried but something is off and it's not working

@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 0.5rem;
}
  #productList .product .product-title {
    font-size: 0.5px !important;
}}

 

Hope someone will help me,

thank you!

Hi @wedoaesthetic

@media only screen and (max-width: 767px) {
  .grid-item  .grid-title  {
    font-size: 0.8rem;
  }  
  .grid-item  .product-price  {
    font-size: 1.5rem;
  }  
}

Let me know how it works on your page

Support me by pressing 👍 if this useful for you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Here is my testing result

image.png.7223b37a4a4bf7b3d7f521d899f2e522.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 7 months later...

Hello @bangank36

I tried to use your solution but I'm not getting the results I need. Would you be willing to help me out? I am trying to make the font smaller in the mobile view of this page. I tried your solution but after it not working, I tried this:

@media only screen and (max-width: 640px) 
{.ProductList-item-link {font-size: 0.8rem!important}}

and I'm still not getting what I want. Here is the page - https://www.redhotmetal.net/diamond-shears

Thank you very much in advance!

text too big.jpg

Edited by KMoreno
Link to comment
On 6/25/2022 at 4:02 AM, KMoreno said:

Hello @bangank36

I tried to use your solution but I'm not getting the results I need. Would you be willing to help me out? I am trying to make the font smaller in the mobile view of this page. I tried your solution but after it not working, I tried this:

@media only screen and (max-width: 640px) 
{.ProductList-item-link {font-size: 0.8rem!important}}

and I'm still not getting what I want. Here is the page - https://www.redhotmetal.net/diamond-shears

Thank you very much in advance!

text too big.jpg

Use this code

@media screen and (max-width:640px) {
h1.ProductList-title {
    font-size: 18px !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
On 6/29/2022 at 2:46 AM, KMoreno said:

@tuanphan for example what I see is in the image below. I don't see 

.ProductList-title

but surely that is the class that works. I keep seeing this class ...

 

.ProductList-item-link

selectors.jpg

It is here

Screenshot_5.thumb.png.c3a78c6119b5946a6d367775fe6913e7.png

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 weeks later...

Hi there, 

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny. I'll provide a screenshot of both desktop/mobile view to show the comparison.

site is: https://www.carmelart95years.com/inventory

password is: carmelart

Do you have a code to fix this? 

Thanks!
Grace

Screen Shot 2022-07-23 at 3.50.10 PM.png

Screen Shot 2022-07-23 at 3.50.27 PM.png

Link to comment
2 hours ago, graciewo said:

Hi there, 

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny. I'll provide a screenshot of both desktop/mobile view to show the comparison.

site is: https://www.carmelart95years.com/inventory

password is: carmelart

Do you have a code to fix this? 

Thanks!
Grace

Screen Shot 2022-07-23 at 3.50.10 PM.png

Screen Shot 2022-07-23 at 3.50.27 PM.png

I check that you are breaking your word so they has the <br> so we can not target and style it

image.thumb.png.b674f9fc6ee06fde424773a7b86fed49.png

Can you remove the breaking line?

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi, 

Thank so much for your response! 

If I remove the breaking line, would my product line just be one line on all platforms (mobile and desktop?)

It is important that the artist name is differentiated from the title of the piece. 

Thanks again, 

Grace

Link to comment
On 7/23/2022 at 11:55 PM, graciewo said:

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny.

Hi Grace

Did you add the CSS from the guide you've used? It sets the size of that first line of the product title.

/* Product Title: larger first line on product detail page */ 
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line { 
  font-size: calc(2.16vw + 1rem); 
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

The calculation in the CSS should adapt if for all devices but yes you could manually set a certain size for mobile devices by using a media query. For example:

@media screen and (max-width:767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: 30px; 
  }
}


   

 

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...
16 hours ago, EmmaBIllustration said:

Hi, I'm wondering if anyone can help please? I used the code above to change the font size in mobile view for my shop, but would love to centre the Product title and price too.

Site is emmabondillustration.com

pass is ForestPark009

Many thanks!

Add to Design > Custom CSS

/* Center title price */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-item * {
    text-align: center;
}
}

image.png.89502351909add8f6fb07b62e772b7eb.png

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
On 9/14/2022 at 4:25 PM, EmmaBIllustration said:

That worked perfectly, thank you so much. I'm having one other issue.

On my home page I have a summary block featuring 3 products. Is there any way to fix this so it is full width on all desktop / tablet screens and not defined by column width only? On larger screens, there's a big gap to the right of the third image.

 

Thanks in advance, Emma

Hi. You mean this?

image.thumb.png.988ff694772168162619e919cf828ca6.png

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.