CMS Development

NVandrepol
Mitwirkender/Mitwirkende

Making the design display in full on mobile

lösung

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 Akzeptierte Lösung
Indra
Lösung
Ratgeber/-in | Elite Partner
Ratgeber/-in | Elite Partner

Making the design display in full on mobile

lösung

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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

Lösung in ursprünglichem Beitrag anzeigen

4 Antworten
NVandrepol
Mitwirkender/Mitwirkende

Making the design display in full on mobile

lösung

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!

webdew
Ratgeber/-in | Diamond Partner
Ratgeber/-in | Diamond Partner

Making the design display in full on mobile

lösung

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. 

Kevin-C
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Making the design display in full on mobile

lösung

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!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Indra
Lösung
Ratgeber/-in | Elite Partner
Ratgeber/-in | Elite Partner

Making the design display in full on mobile

lösung

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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