Mobile Visual Discrepancy

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 

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. 

Hi @melody495 if that's the case, then why does the Squarepspace platform allow for it took be set up correctly? 

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. 

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

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. 

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. 

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} }