We were experimenting with a new header design for our homepage onhttps://www.ae.be/en/-0?hs_preview=aatEMoCJ-48318061415. Unfortunately, we don't seem able to present the design on mobile the same way as on a desktop. Specifically, some of the design elements in the upper left corner disappear on the mobile version. We wanted to know if this can be adjusted in HubSpot, or if we need to go back to the design board?
Can you be more specific about what is disappearing in the upper left corner.
The logo stays in place. And also your nav is working on mobile. I think it's just a matter of styling the mobile version of your new header. From a usability point of view, be carefull with the text on top of your parallax header background. In some times, tekst will be hard to read. Also desktop resolution is landscape, while mobile in most cases will be portrait so you will have a different focus point.
Regarding to 'making the design display full on mobile'. With a responsive design you can smaller the font size. I don't recommend having text going from left to right and having it 100% with. with a bit of space, it will give your visitors a better readability. For your header, I would recommend a minimum height om 90vh (viewport height), of 100vh but then you should add a indicator visitors can scroll your page.
Hi @Indra, @Kevin-C & @webdew, sorry for responding so late. I didn't saw your reactions in my notifications, my apologies. I will try to add these possible solutions and see what comes out. Thank you all in advance for the help!
@Indra is correct, your font-size is much too large for the space causing the overflow. You can test that this is the issue by using the inspecor to apply the css rule "word-break: break-all;" to the text in question.
Can you be more specific about what is disappearing in the upper left corner.
The logo stays in place. And also your nav is working on mobile. I think it's just a matter of styling the mobile version of your new header. From a usability point of view, be carefull with the text on top of your parallax header background. In some times, tekst will be hard to read. Also desktop resolution is landscape, while mobile in most cases will be portrait so you will have a different focus point.
Regarding to 'making the design display full on mobile'. With a responsive design you can smaller the font size. I don't recommend having text going from left to right and having it 100% with. with a bit of space, it will give your visitors a better readability. For your header, I would recommend a minimum height om 90vh (viewport height), of 100vh but then you should add a indicator visitors can scroll your page.