thecreativefeel Posted December 12, 2023 Share Posted December 12, 2023 I am looking for help with custom code that will fix a responsive design error within the mobile version of my website. There are no errors within the Squarespace design platform, however, my mobile device shows a break in the text line. See the attached screenshots for reference. Pages with errors: Home - https://urban-sweat.squarespace.com/ Packages + Memberships - https://urban-sweat.squarespace.com/packages-memberships Link to comment
melody495 Posted December 12, 2023 Share Posted December 12, 2023 Hi @thecreativefeel There is simply not enough room for the text to appear on the same line. There are a couple of things you could do; in mobile edit mode, 1) reduce text size and/or 2) increase text block size. Let me know how it goes. AlexSan 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
thecreativefeel Posted December 12, 2023 Author Share Posted December 12, 2023 Hi @melody495 if that's the case, then why does the Squarepspace platform allow for it took be set up correctly? Link to comment
melody495 Posted December 12, 2023 Share Posted December 12, 2023 3 minutes ago, thecreativefeel said: Hi @melody495 if that's the case, then why does the Squarepspace platform allow for it took be set up correctly? Not sure what you mean by that. As well as making edits for the desktop view, you will have to check the mobile view and adjust as necessary. You have full control to design both views. The text sizes and content etc are as you have created them to be. You are the designer, SquareSpace is a platform that gives you certain controls to design your website. You can read more from SquareSpace here Editing your site with fluid engine Hope this helps. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
CassAggett Posted December 13, 2023 Share Posted December 13, 2023 8 hours ago, thecreativefeel said: Hi @melody495 if that's the case, then why does the Squarepspace platform allow for it took be set up correctly? It will because your phone screen is slightly smaller than the preview on Squarespace. If you can test on someone else's phone that has a slightly bigger screen it will likely look the same as the preview in edit mode If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆 Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business. WEBSITE • INSTAGRAM Link to comment
thecreativefeel Posted December 13, 2023 Author Share Posted December 13, 2023 Hi there @melody495 I am aware of the capabilities of Squarespace and understand how to make adjustments within the Squarespace platform. Custom coding allows for a variety of adjustments outside of the standard scope that the platform provides, which was my original request when I opened this thread. If you're unable to assist here, then that's fine, but that's what I'm hoping to learn more about. Link to comment
melody495 Posted December 13, 2023 Share Posted December 13, 2023 Hi @thecreativefeel did you try the suggestion in my first response ? On 12/12/2023 at 9:32 PM, melody495 said: Hi @thecreativefeel There is simply not enough room for the text to appear on the same line. There are a couple of things you could do; in mobile edit mode, 1) reduce text size and/or 2) increase text block size. Let me know how it goes. If not, what would you like to change? Your text is too long to fit in the same line for that screen size, so you could either shorten the wording, stack them or reduce text size. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
thecreativefeel Posted December 14, 2023 Author Share Posted December 14, 2023 Hi @melody495 the two suggestions you provided were able to 'fix' the errors, however, they changed the intention of the design itself. So dropping in some code I found through a separate forum to help anyone else who may run into this problem -- it'll change the font size within the mobile version without adjusting the desktop setup. @media screen and (max-width:640px) { custom section h4 { font-size:0.8rem!important} } melody495 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