CMS Development

IEbmeier
Member

Need Help: Reactive Mobile Menu Sizing

SOLVE

All, 

 

Non-developer from a small business here. Don't have any in-house coders, need some guidance on this issue. 

 

The mobile header (global content) on our website displays incorrectly on mobile.

 

I've chatted with Hubspot support, and was directed to this community post (on "media queries") as a potential solution. 

 

Can someone direct me to a "for dummies" resource on this issue, or potentially walk me through the process of implimenting this fix for our site? This is way beyond anything we're equipped to do in-house.  Thanks so much for any input. 

0 Upvotes
2 Accepted solutions
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Sorry, there is a typo in the snippet I sent, here is the corrected version, sorry for the inconvenience

@media (max-width: 767px){
  .mobile-header-contact {
    display: none!important;
  }
}

View solution in original post

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hi @IEbmeier

you've placed the styling inside the script-tag. This can't work. 

Cut the code and place it either between 

</script> and <meta>-tags or directly in your main.css file. 

If you want to place it in the file the code should look like this: 

</script>
<style>
@media (max-width:767px){
.mobile-header-contact{
display:none !important;}
}
</style>
<meta....>

 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

7 Replies 7
IEbmeier
Member

Need Help: Reactive Mobile Menu Sizing

SOLVE

Solved. Thank you so much everyone! 

miljkovicmisa
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hello @IEbmeier and thank you for writing, by reviewing you page I noticed the issue with the contacts in the header, I guess you actually don't need that in the mobile version because it is repeated in the bottom section of the website (footer). Since the natural action on mobile devices is scrolling you don't need to worry about the majority of users not ending up there. So my suggestion is to remove completely the phone contact numbers from the header in mobile.

To do that you can go to:
Settings (the little gear icon up right corner) -> Website (on the left sidebar) -> Pages


This opens a window on the right side that has several tabs, first one is called "Templates". In this tab you should see a section called "HTML" and below another section called "Site header HTML", below it is a dark area where you should paste the below code snippet:

 

@media (max-width: 767px){
  .mobile-header-contact {
    display: none!important;
  }
}

 

 

If you need any further help don't hesitate to ask here.

If my answer was helpful please mark it as a solution.

 

IEbmeier
Member

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hi, 

 

Thanks, I agree and this seems like the best solution. Unfortunately that code isn't producing the desired result. Here is the pasted code, and a screenshot of the dispaly on mobile after everything was saved and reloaded a few times. 

Screen Shot 2021-08-09 at 7.46.31 AM.png

Screen Shot 2021-08-09 at 7.44.24 AM.png

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hi @IEbmeier

you've placed the styling inside the script-tag. This can't work. 

Cut the code and place it either between 

</script> and <meta>-tags or directly in your main.css file. 

If you want to place it in the file the code should look like this: 

</script>
<style>
@media (max-width:767px){
.mobile-header-contact{
display:none !important;}
}
</style>
<meta....>

 

 

best, 

Anton

Anton Bujanowski Signature
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Sorry, there is a typo in the snippet I sent, here is the corrected version, sorry for the inconvenience

@media (max-width: 767px){
  .mobile-header-contact {
    display: none!important;
  }
}
0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hi @IEbmeier

I've tested your page in Chrome mobile and haven't found any big issues. 

Could you please clearify what exactly you would like to fix?

 

Tip: To fix the reCaptcha alignment, go to the design-manager, open your theme folder and search for "main.css". Open this file and add following code (I recommend at the very bottom)

.grecaptcha-badge{
margin:0;
}

 

Also it seems that your two badges "accrided..." and the podcast one are out of the container wrapper. Could you please make a screenshot of the global footer element from within the design-manager?

 

 

best, 

Anton

Anton Bujanowski Signature
KCCCCC
Member | Elite Partner
Member | Elite Partner

Need Help: Reactive Mobile Menu Sizing

SOLVE

Hey @IEbmeier 

 

Could you elaborate a little more on the issue? With a little more context I'm 100% positive we can finds a solution that you and your team can maintain in the future!

0 Upvotes