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 Beyondspace 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 5, 2021 Share Posted November 5, 2021 Here is my testing result wedoaesthetic 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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! Beyondspace 1 Link to comment
KMoreno Posted June 24, 2022 Share Posted June 24, 2022 (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, 2022 by KMoreno Link to comment
tuanphan Posted June 26, 2022 Share Posted June 26, 2022 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, 2022 Share Posted June 28, 2022 @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, 2022 Share Posted June 28, 2022 @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, 2022 Share Posted June 30, 2022 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, 2022 Share Posted July 23, 2022 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
Beyondspace Posted July 24, 2022 Share Posted July 24, 2022 (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, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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, 2022 Share Posted July 26, 2022 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, 2022 Share Posted July 26, 2022 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); } About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
graciewo Posted July 26, 2022 Share Posted July 26, 2022 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, 2022 Share Posted July 26, 2022 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; } } About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
graciewo Posted July 26, 2022 Share Posted July 26, 2022 Hi @paul2009 This worked perfectly! Thank you, thank you! 🙂 Grace paul2009 1 Link to comment
EmmaBIllustration Posted September 11, 2022 Share Posted September 11, 2022 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! Link to comment
tuanphan Posted September 12, 2022 Share Posted September 12, 2022 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; } } 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
EmmaBIllustration Posted September 14, 2022 Share Posted September 14, 2022 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 Link to comment
tuanphan Posted September 16, 2022 Share Posted September 16, 2022 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment