Responsive design issue on homepage, need code assistance

Site URL: https://www.sarahjacobus.com/

Hello! 

I'm needing some help with a responsive design issue I'm having on my client's website. The sub-line on the homepage that lists her work "Teaching Artist | Social Worker, etc..." is getting pushed down too low so it's getting cut off and you have to scroll to see the list. The homepage is supposed to be one section with a full scale image background with no scrolling. On the squarespace mobile view it shows it correctly (seen in first picture) on my phone as well as my iPad it shows incorrectly (shown in second picture. 

Any one have any ideas for code that could help make sure this doesn't happen? Thanks!

Right.

The mobile view through the browser inspector and the one that Squarespace provides from within the dashboard can be misleading. It will only display the actual screen dimensions and doesn't include the UI of the browser on mobile devices.

If scrolling down to see the text is the only issue you're having, I would find the appropriate margins/padding for both Android and Apple devices and apply those measurements to your margin or padding bottom text block via CSS.

Wolfsilon makes a good point about te UI of the OS browser on mobile devices. This can change from from to phone even if they all have android or iOS. I have an issue with my moto z3 running Android 9 (can't update it any longer), it pushes the header, including the title, of any vertical screen  view down to the bottom when scrolling the page, and it sits in the background of the text. Switch to horizontal view and it looks fine, and then you can turn back to vertical. This does not happen on my wife's new Moto Edge 5g UW phone running Android 11. If there is some kind of setting either in SS on the phone to fix this, I can't find it. 

2 hours ago, Wolfsilon said:

Right.

The mobile view through the browser inspector and the one that Squarespace provides from within the dashboard can be misleading. It will only display the actual screen dimensions and doesn't include the UI of the browser on mobile devices.

If scrolling down to see the text is the only issue you're having, I would find the appropriate margins/padding for both Android and Apple devices and apply those measurements to your margin or padding bottom text block via CSS.

Thanks for your response! Do you have code suggestions on how to add css to the padding bottom of the page? I'm not sure how to do this. 😕

On 10/19/2021 at 5:50 AM, makennaokeeffe said:

Thanks for your response! Do you have code suggestions on how to add css to the padding bottom of the page? I'm not sure how to do this. 😕

It looks fine to me. Did you figure it out?