Bridie Posted November 11, 2022 Share Posted November 11, 2022 Hi, I think on all my pages the header text is scaling down to fit on the mobile width except for my contact page - for some reason the second and third headings on the page 'collaborations' and 'recommendations' are breaking across the page on mobile view. They have no custom css attached to them and i've tried removing all formatting, deleting and re-adding etc. Can anyone spot the problem please? It's this page: www.whyyoucreate.com/contact Password: cr3ate Link to comment
Ziggy Posted November 11, 2022 Share Posted November 11, 2022 Hi @Bridie I'm having a look at your website and I can see the problem, I think the only way you'll fix that without effecting the desktop style or changing to a smaller heading is to target those specific headings with a responsive font size (maybe consistent on that one page, depends on your preference). Page-wide: #collection-634d2451e98a0b7dbaa88e44 { h2 { font-size:8vw; } } Specific to just those two headings: #block-fd9f3d03dd6ac8057856, #block-yui_3_17_2_1_1668018970547_1965858 { h2 { font-size:8vw; } } Nice website BTW, very bold! Bridie 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Bridie Posted November 11, 2022 Author Share Posted November 11, 2022 Oh that's worked brilliantly, thanks so much! And many thanks for the compliment, that means so much!! Link to comment
Solution Ziggy Posted November 11, 2022 Solution Share Posted November 11, 2022 I'm sorry actually I meant to put that code in a media query so it only effects the mobile site: @media only screen and (max-width:767px) { #collection-634d2451e98a0b7dbaa88e44 { h2 { font-size:8vw; } } } @Bridie Bridie 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 Hi, I have a similar issue. This website for my client launches tomorrow and I'm running into a issue with text on one page appearing very different pending on the mobile device. It looks fine when using mobile view on my computer but on an actual iPhone it looks wrong (Screenshots below). I desperately need assistance on this as I'm on a time crunch! Any help would be much appreciated. Website is: cameronbuy.com screen shot 1 is how it should appear on mobile. Screen shot 2 is how its appearing on a different iPhone than mine. Even the image icons are being affected for some reason? @tuanphan @ziggy Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 @Gabrielle_Studiowp try adding this to your Custom CSS: @media only screen and (max-width: 767px) { h1 { font-size: 9vw; } } Hope that helps! Gabrielle_Studiowp 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 Thank you so much! Do I have to use the collection ID for that specific page in the coding? Also could i use pts (for example on desktop the font is 34pts give or take...if I knocked off a few points in mobile to around 21 pts it looks good) or do I have to type 9vw; @Ziggy Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 Yes, I would add the section ID: @media only screen and (max-width: 767px) { section[data-section-id="62d1bea415e407318d4735b4"] { h1 { font-size: 9vw; } } } pts is generally used for printing purposes, I would recommend using REM instead, but I suggested VW as it is a relative unit that scales the font based on the screen width. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 (edited) @ZiggyOh interesting, noted! Thank you for explaining that. Last question - would the 9vw look equivalent to 21 pts ish? It's weird because on my end everything looks fine, but I can really only see if it works well on a phone other than mine. Also I will definitely buy you a coffee for your help, I appreciate it so much Edited November 24, 2022 by Gabrielle_Studiowp Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 3 minutes ago, Gabrielle_Studiowp said: would the 9vw look equivalent to 21 pts ish Sometimes... 9vw seems to keep the titles as big as they can get without wrapping mid-word in my testing. Gabrielle_Studiowp 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 A million thanks @Ziggy Hope you have a great day Ziggy 1 Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 Just now, Gabrielle_Studiowp said: A million thanks @Ziggy Hope you have a great day No problem! You too! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 (edited) @Ziggy I've found a new issue. I didn't add any css to this header but I notice when I'm on a mobile device and I scroll past the header, it goes in and out of two different sizes for some reason? I've attached a video below. I've changed the header to just be a standard h1 heading (for now) instead of it being a custom scaled text option. RPReplay_Final1669306011.MP4 Edited November 24, 2022 by Gabrielle_Studiowp Link to comment
Ziggy Posted November 24, 2022 Share Posted November 24, 2022 Wow, that's an interesting issue, I'll have to scratch my head over this, but it almost seems like the viewport width is changing when you scroll past ... caused by the scrollbar??? Weird! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gabrielle_Studiowp Posted November 24, 2022 Share Posted November 24, 2022 (edited) @Ziggy Right?! The only way I could resolve it was by not using the 'scale text' feature on Squarespace. Even the custom css you suggested before didn't fix the issue Edited November 24, 2022 by Gabrielle_Studiowp Link to comment
Ziggy Posted November 25, 2022 Share Posted November 25, 2022 Yes, \I'll have to test the scale text feature on mobile more, and see if I can pinpoint the problem, and then log a bug with Squarespace. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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