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.
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:
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.
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?
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!