topic Re: Need Help: Reactive Mobile Menu Sizing in CMS Development

Need Help: Reactive Mobile Menu Sizing

IEbmeier — Sat, 07 Aug 2021 16:55:32 GMT

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.

Re: Need Help: Reactive Mobile Menu Sizing

KCCCCC — Sun, 08 Aug 2021 17:15:54 GMT

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!

Re: Need Help: Reactive Mobile Menu Sizing

Anton — Sun, 08 Aug 2021 17:17:21 GMT

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

Re: Need Help: Reactive Mobile Menu Sizing

miljkovicmisa — Mon, 09 Aug 2021 12:49:33 GMT

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.

Re: Need Help: Reactive Mobile Menu Sizing

IEbmeier — Mon, 09 Aug 2021 12:46:45 GMT

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.

Re: Need Help: Reactive Mobile Menu Sizing

miljkovicmisa — Mon, 09 Aug 2021 12:49:05 GMT

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

Re: Need Help: Reactive Mobile Menu Sizing

Anton — Mon, 09 Aug 2021 12:51:29 GMT

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

Re: Need Help: Reactive Mobile Menu Sizing

IEbmeier — Mon, 09 Aug 2021 13:06:54 GMT

Solved. Thank you so much everyone!