Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to change Product Title Text Size on mobile view only


Go to solution Solved by bangank36,

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 BaNgan from 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, Youtube Gallery for Squarespace
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 BaNgan from 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, Youtube Gallery for Squarespace
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 BaNgan from 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, Youtube Gallery for Squarespace
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: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Hi @paul2009

I did use the code from your guide – thanks again for that! However I'm wondering if I can change the font size in mobile view. For some reason, the first line of the product title appears tiny. Any ideas? 

I appreciate your time and consideration!

Grace

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: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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