wedoaesthetic Posted November 5, 2021 Share Posted November 5, 2021 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 bangank36 Posted November 5, 2021 Solution Share Posted November 5, 2021 (edited) 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 November 5, 2021 by bangank36 wedoaesthetic 1 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 SquarespaceIf 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
bangank36 Posted November 5, 2021 Share Posted November 5, 2021 Here is my testing result wedoaesthetic 1 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 SquarespaceIf 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
wedoaesthetic Posted November 5, 2021 Author Share Posted November 5, 2021 YES! It works! Thank you so much for saving the day! bangank36 1 Link to comment
KMoreno Posted June 24 Share Posted June 24 (edited) 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! Edited June 24 by KMoreno Link to comment
tuanphan Posted June 26 Share Posted June 26 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! 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
KMoreno Posted June 28 Share Posted June 28 @tuanphan THANK YOU SO MUCH! That worked. Where do you see the class .ProductList-title ? I looked in the inspect tool but I still can't find it. Again - thank you! Link to comment
KMoreno Posted June 28 Share Posted June 28 @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 Link to comment
tuanphan Posted June 30 Share Posted June 30 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 It is here 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
graciewo Posted July 23 Share Posted July 23 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 Link to comment
bangank36 Posted July 24 Share Posted July 24 (edited) 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 I check that you are breaking your word so they has the <br> so we can not target and style it Can you remove the breaking line? Edited July 24 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 SquarespaceIf 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
graciewo Posted July 26 Share Posted July 26 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
paul2009 Posted July 26 Share Posted July 26 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
graciewo Posted July 26 Share Posted July 26 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
paul2009 Posted July 26 Share Posted July 26 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
graciewo Posted July 26 Share Posted July 26 Hi @paul2009 This worked perfectly! Thank you, thank you! 🙂 Grace paul2009 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment