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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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 Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
LeeM Posted July 30 Share Posted July 30 (edited) Hi @Ziggy, I had the same problem and I used this code and it works brilliantly for my headers: <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 30vh !important; height: 50vh !important; margin-top:0px; } } </style> However, it breaks my mobile view of my blogs. I can't see the upper 1/3 and it crowds the footer into the text. Can you help? I spoke to Squarespace and they said as it's code they can't help me. acerintegration.com/writing Thank you! Edited July 30 by LeeM Ziggy 1 Link to comment
Ziggy Posted July 30 Share Posted July 30 2 minutes ago, LeeM said: acerintegration.com/writing What code do you have, something is quite broken! The code I've provided in this thread has been very simple heading sizing, and shouldn't effect the broken parts of your website. Can you share the CSS with me? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
LeeM Posted July 30 Share Posted July 30 Hi @Ziggy, It was a slightly different issue for me. My headers weren't mobile responsive. They are images and not text so I've been using this code and it's been working great for years. It's only now that I'm trying to add a blog page that the scripts running due to the code are making it impossible. the Squarespace guy said I needed better code to still shrink the headers accordingly but not break the blog page. This is the code: <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 30vh !important; height: 50vh !important; margin-top:0px; } } </style> Link to comment
Ziggy Posted July 30 Share Posted July 30 This is the problem: You have a fixed height set for the first section of every page, so the rest of the blog ends up being an overflow. You either need to exclude the blogs or just target the pages you want this code to apply to. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox 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