# Need Help: Reactive Mobile Menu Sizing

**URL:** <https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [August 7, 2021, 4:55pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990 "2021-08-07T16:55:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![IEbmeier](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iebmeier/32/60590_2.png) [@IEbmeier](https://community.hubspot.com/u/IEbmeier)\
**Post date:** [August 7, 2021, 4:55pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/1 "2021-08-07T16:55:32Z")

</div>

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.](https://www.waltersgilbreath.com/)

I’ve chatted with Hubspot support, and was [directed to this community post](https://community.hubspot.com/t5/CMS-Development/Landing-page-responsive-on-mobile/td-p/266463) (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.

---

<div class="post-metadata">

**Author:** ![KCCCCC](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kccccc/32/93181_2.png) [@KCCCCC](https://community.hubspot.com/u/KCCCCC)\
**Post date:** [August 8, 2021, 5:15pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/2 "2021-08-08T17:15:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 8, 2021, 5:17pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/3 "2021-08-08T17:17:21Z")

</div>

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)

```lia-code-sample
.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

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [August 9, 2021, 9:12am UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/4 "2021-08-09T09:12:43Z")

</div>

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:

```lia-code-sample
@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.** _

---

<div class="post-metadata">

**Author:** ![IEbmeier](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iebmeier/32/60590_2.png) [@IEbmeier](https://community.hubspot.com/u/IEbmeier)\
**Post date:** [August 9, 2021, 12:46pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/5 "2021-08-09T12:46:45Z")

</div>

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.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/7/f72ad5ddbf23f24acc84469e1d699182a62141d8.jpeg)

 ![Screen Shot 2021-08-09 at 7.44.24 AM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/4/846fc355f9d7463af4e1d893150d3fca76ac52bb.jpeg)

---

<div class="post-metadata">

**Author:** ![miljkovicmisa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miljkovicmisa/32/86357_2.png) [@miljkovicmisa](https://community.hubspot.com/u/miljkovicmisa)\
**Post date:** [August 9, 2021, 12:49pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/6 "2021-08-09T12:49:05Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 9, 2021, 12:51pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/7 "2021-08-09T12:51:29Z")

</div>

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:

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

```

best,

Anton

---

<div class="post-metadata">

**Author:** ![IEbmeier](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/iebmeier/32/60590_2.png) [@IEbmeier](https://community.hubspot.com/u/IEbmeier)\
**Post date:** [August 9, 2021, 1:06pm UTC](https://community.hubspot.com/t/need-help-reactive-mobile-menu-sizing/41990/8 "2021-08-09T13:06:54Z")

</div>

Solved. Thank you so much everyone!