StoikStijn Posted December 5, 2022 Share Posted December 5, 2022 Hi, We designed a website and now would like to adjust the font size of the mobile view only. This is not support by Squarespace out of the box as far as I understood, however I read I should be possible with custom CSS adjustments. I am looking to adjust for example some of the paragraph text. I tried some custom CSS found here on the forum with the likes of: @media only screen and (max-width: 640px) { p { font-size: 8px; } } However have no in-depth knowledge about custom CSS, is there anyone who has another suggestion on how this can be done? Much appreciate in advance for reading this far, any feedback/help is welcome. Thanks! Link to comment
Beyondspace Posted December 5, 2022 Share Posted December 5, 2022 4 minutes ago, StoikStijn said: Hi, We designed a website and now would like to adjust the font size of the mobile view only. This is not support by Squarespace out of the box as far as I understood, however I read I should be possible with custom CSS adjustments. I am looking to adjust for example some of the paragraph text. I tried some custom CSS found here on the forum with the likes of: @media only screen and (max-width: 640px) { p { font-size: 8px; } } However have no in-depth knowledge about custom CSS, is there anyone who has another suggestion on how this can be done? Much appreciate in advance for reading this far, any feedback/help is welcome. Thanks! May be another Css styles, which has higher priority, overwrites your Css style. You can try adding !important to your code to make it highest priority 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 December 5, 2022 Share Posted December 5, 2022 Reference: https://www.thebookdesigner.com/styling-priorities-css-for-ebooks-3/ https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 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
StoikStijn Posted December 5, 2022 Author Share Posted December 5, 2022 2 hours ago, Beyondspace said: May be another Css styles, which has higher priority, overwrites your Css style. You can try adding !important to your code to make it highest priority Thanks for your reply! I have tried adding the !important to the code unfortunately does not seem to budge, also tried it with another piece of code: @media only screen and (max-width: 640px) { // Paragraph p {font-size:1rem !important} } Tried to change the 'rem' to any value but still do not see any difference on the mobile site. Possibly any other suggestions? Or anything I can show/supply to better understand the currant state? Thanks! Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/5/2022 at 7:27 PM, StoikStijn said: Thanks for your reply! I have tried adding the !important to the code unfortunately does not seem to budge, also tried it with another piece of code: @media only screen and (max-width: 640px) { // Paragraph p {font-size:1rem !important} } Tried to change the 'rem' to any value but still do not see any difference on the mobile site. Possibly any other suggestions? Or anything I can show/supply to better understand the currant state? Thanks! What is your site url? I think your CSS box has an error so above code doesn't work. 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
StoikStijn Posted December 19, 2022 Author Share Posted December 19, 2022 (edited) On 12/10/2022 at 4:05 AM, tuanphan said: What is your site url? I think your CSS box has an error so above code doesn't work. sawfish-raccoon-xkes.squarespace.com This is the site URL, there is indeed an error in the CSS box but can't seem to understand what the error is. Edited December 19, 2022 by StoikStijn Link to comment
Solution paul2009 Posted December 19, 2022 Solution Share Posted December 19, 2022 2 hours ago, StoikStijn said: This is the site URL, there is indeed an error in the CSS box but can't seem to understand what the error is The content within the yellow box on line 5 is incorrect. It should include the name of a font that has already been installed or downloaded. If you need to specify a URL for the font, you should use an @font-face rule first. You cannot include a URL in the line where the font-family property is specified. Did this help? Please give feedback by clicking an icon below ⬇️ 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment