Making the design display in full on mobile

SOLVE
NVandrepol
Contributor

Hi,

 

We were experimenting with a new header design for our homepage on https://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? 

 

Thanks!

0 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

Hi @NVandrepol,

 

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.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

4 Replies 4
Indra
Solution
Top Contributor | Diamond Partner

Hi @NVandrepol,

 

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.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

Kevin-C
Recognized Expert

Hey @NVandrepol 

 

@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.

 

This CSS should be a good starting point:

@media screen and (max-width: 768px) {
  .banner-background-image.parallax-section-1 .hs_cos_wrapper_type_rich_text h2,
  .banner-background-image.parallax-section-1 .hs_cos_wrapper_type_rich_text h2 span {
    font-size: 1.5rem!important;
  }
}

 

Hope this gets ya going!

webdew
Top Contributor | Diamond Partner

Hi @NVandrepol ,

Please Add This Css in your style css:

@media (max-width:767px){
span#hs_cos_wrapper_module_1547571317995253 h2 {
font-size: 25px !important;
}
.banner-background-image.parallax-section-1 > .page-center {
padding: 0;
}
body span#hs_cos_wrapper_module_1547571317995253 {
padding-left: 0 !important;
padding-top: 70px !important;
}
}


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

NVandrepol
Contributor

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!