Header cut off on smaller mobile devies

Site URL: https://capybera-plum-czms.squarespace.com

Hi,

I am creating a website that is predominantly going to be used on phones. I have an iPhone 11 pro max where the site looks just as I would like but I also have a Huaweui P20 pro where some of the header is cut off and some text changes incorrectly. I have tried using   @media screen and (max-width:640px) to fix this but cannot get it to work. I also think that this would cause me issue when I come to edit the desktop site. I would like to keep the site header on one line at the top.

Site password is 110316Lots!

Please see screenshots of the issue below:

4 hours ago, LMLB said:

Site URL: https://capybera-plum-czms.squarespace.com

Hi,

I am creating a website that is predominantly going to be used on phones. I have an iPhone 11 pro max where the site looks just as I would like but I also have a Huaweui P20 pro where some of the header is cut off and some text changes incorrectly. I have tried using   @media screen and (max-width:640px) to fix this but cannot get it to work. I also think that this would cause me issue when I come to edit the desktop site. I would like to keep the site header on one line at the top.

Site password is 110316Lots!

Please see screenshots of the issue below:

I check that you are using fluid engine which allows you to change layout on desktop and mobile also.

https://recordit.co/nsyvNN1PbL

Have you tried it yet?

8 hours ago, bangank36 said:

I check that you are using fluid engine which allows you to change layout on desktop and mobile also.

https://recordit.co/nsyvNN1PbL

Have you tried it yet?

Thanks for your reply. Yes I have tried this - the issue comes when viewing the site of different size screens. I have one phone with a large screen which shows the website exactly how I want but I have a smaller phone where some of the header is cut off and some other issues are caused (in the screenshots above)