Need Help: Reactive Mobile Menu Sizing

[IEbmeier]

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. 

[miljkovicmisa · Accepted solution]

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;
  }
}

[IEbmeier]

Solved. Thank you so much everyone! 

[miljkovicmisa]

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]

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. 

 

 

[Anton · Accepted solution]

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

[miljkovicmisa · Accepted solution]

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;
  }
}

[Anton]

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

[KCCCCC]

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!