visionsbyfurks Posted December 28, 2021 Share Posted December 28, 2021 Site URL: http://www.furkhaniqbal.com Hello, I am having troubles with the mobile responsive version of my website where the text overflows on the info page. When I mean overflow, I want each word on its own line however it's overflowing across 1 or more. Example attached of desktop and mobile. Link to comment
KwameAndCo Posted December 28, 2021 Share Posted December 28, 2021 Hi @visionsbyfurks The issue is that you're using a very large font. An easy fix would be to reduce the font size on mobile, for example by targeting the block and using CSS media queries like so: @media (max-width: YOURMAXWIDTH) { #block-61c8eac2720fa036c70b804d h1 { font-size: 22vw; white-space: normal!important; } } I would suggest 22vw as that produces the below result which works well and scales responsively. And a max-width of 640px. But you may wish to choose a different breakpoint. I would also consider changing the "white-space" property so that the text correctly centers. Here's an example of how I achieved the above. @media (max-width: 640px) { #block-61c8eac2720fa036c70b804d h1 { font-size: 22vw; white-space: normal!important; } } If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links. You can also thank me by buying me a coffee ☕. Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon) 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