lfang2 Posted September 28, 2022 Share Posted September 28, 2022 Site URL: https://www.lesliefang.com/pawalong Hiiii, The new font scaling is not working well for me in mobile view. If I leave it on regular view it's oversized and if I scale it to fit, it throws the alignment all off. Is there a way to to make them all match the same font size? When not the font is not scale the font (as attached below) looks so awkward. If I scaled the font its look to0 small and out of sync with the rest of the title blocks i have. Link to comment
lfang2 Posted September 29, 2022 Author Share Posted September 29, 2022 For now my workaround is making the text into a image so it doesn't auto scale. Link to comment
Ziggy Posted September 29, 2022 Share Posted September 29, 2022 Hi @lfang2, I generally wouldn't recommend converting your text to an image, it's not great for readability or for SEO. The "scale to fit" feature for text is great for making small pieces of text fit an area, but doesn't tend to be a great solution for longer strings of text since it gets scaled rather small on mobile. What look were you trying to achieve that a standard H4 font didn't achieve? 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
lfang2 Posted September 29, 2022 Author Share Posted September 29, 2022 Hi @Ziggy, I'm not to worry about the SEO as most the images I use in text are not seo friendly and mostly only titles. The main reason, I want the text to the same size so it looks the same all across my portfolio. Link to comment
Ziggy Posted September 29, 2022 Share Posted September 29, 2022 1 hour ago, lfang2 said: The main reason, I want the text to the same size so it looks the same all across my portfolio. This should be achievable with the headings. If it isn't can you show me the problem in detail so that I can help you come to a solution that you're happy with? 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
lfang2 Posted September 29, 2022 Author Share Posted September 29, 2022 @Ziggy Yes please that would be so awesome if you can. The new fluid design has me confused and having to rearrange a whole bunch of things as i edit my porfolio. I'm not sure what you mean with heading? The text I use which is oswald is under the heading when I click on it to edit? If I'm understaind you correctly? Link to comment
Ziggy Posted September 29, 2022 Share Posted September 29, 2022 For this example: Leave it as a Heading 4 and edit the mobile view, it looks like all you need to do is move the image down one row and they won't overlap. Editing the mobile version won't have an impact on the desktop version. 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
j.o Posted December 29, 2022 Share Posted December 29, 2022 I've used text scaling for my H1 text at the top of my website (hero), but it doesn't translate well to mobile. I'd prefer the text break to two lines and maintain the H1 without scaling. Appreciate the help! The text I'm referring to is "Accounting is boring." Also, would love help on how to maintain button padding on mobile (that's not translating to mobile well either). Thanks! Link to comment
Wolfsilon Posted December 30, 2022 Share Posted December 30, 2022 If you're using the Fluid Engine grid layout, the desktop view and the mobile view can be individually edited. As for the scaling text. My suggestion would be to use a code specifically for mobile to prevent the text from scaling. Could trying using something like : @media only screen and (max-width: 749px){ h1 { font-size: 48px !important; } } Link to comment
GraphicKnits Posted August 25 Share Posted August 25 (edited) I am also finding issues with the same problem on my site. But the code hasn't been working. @Wolfsilon do you recommend putting this into custom CSS panel or as code directly into the page? I've tried adding this code into the custom css panel, but it still doesn't effect the text that's under the spell of the Scale tool. Edited August 25 by GraphicKnits Link to comment
GraphicKnits Posted August 25 Share Posted August 25 For those looking for a fix, I found this super helpful. https://qosmic.tech/rocketsurgery/how-to-display#code Link to comment
GraphicKnits Posted August 25 Share Posted August 25 I found a fix. I used the custom code found here. If you're also looking for a way around and to have the best of both worlds, it worked well. https://qosmic.tech/rocketsurgery/how-to-display#code Here's my code: @media screen and (max-width: 768px) {#blockID {display:none!important}} @media screen and (min-width: 768px) {#blockID {display:none!important}} tuanphan 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