Issues with responsivness on small screens / smartphones

Super, glad to hear that helped.

You’re quite right. I was trying to balance the mobile menu on/off situations but I can check if the mobile menu is on and adjust the space available to the site title based on that.

Let’s hotfix with the following:

@media (max-width: 1024px) {

	.site-header .site-branding-container {
  		max-width: 90%;
	}

	.main-navigation {
  		max-width: 10%;
	}

}

`

Or to make things a little more compact, the above rules could be inserted into the existing 1024 max-width media query we’re already using.

Hope that helps.

Super; really glad to hear that helped.

Chat soon.

Cheers.

Hi Garden Trending

Thanks for your support, it’s most appreciated.

Do you want the dark bar above your copyright information to remain there? If not, go to Appearance > Widgets > Footer and delete the single empty Text widget that’s currently there. That should solve this challenge. If you want to keep this bar, let me know and I’ll dig a bit deeper and figure out why its causing a scroll bar below 498px in resolution.

Thanks for your feedback. I’ll be able to test further this evening (GMT+2) and will report back then. Chat in a bit 🙂

Sorry for the delay. I’m testing in Chrome’s simulator and on my iPhone (6s) and all seems normal, no scroll bar. Could you perhaps, check again and make sure you’re still seeing it. Thanks for your help.

For sure 🙂

I think the issue might be the Adsense unit at the bottom of the page. Please, try adding the following to a Custom CSS plugin:

@media (max-width: 680px) {
	#pgc-76-2-0 {
		display: none;
	}
}

It’s specifically targeting the unit at the bottom of this page. If this resolves the challenge and if you don’t mind hiding that ad for mobile then I’ll come up with a better solution. Let me know how it goes. Back online tomorrow.

Hi Andrew,

I did a little more digging and I think I’m getting closer to where the issue is. First of all I wanted to mention that I also took a look at the site just now in Chrome’s simulator and it appeared totally fine. However it is still showing up with the grey bars when either my partner or I view it on our phones (both iPhone 6 Plus). The only part of the page that looks ok on mobile (i.e. without the grey bar) is http://gardentrending.com/garden-trending-welcome/. I use Page Builder by SiteOrigin (version 2.3.1) to build all of the pages and posts. I noticed that the http://gardentrending.com/garden-trending-welcome/ page is the only one where all of the text is entered in “Text” components, whereas on the other pages I use the “SiteOrigin Editor” component because it allows me to format the text a bit more, and insert richer content like photo galleries. I have tested my theory that this is what is causing the issue by replacing all of the “SiteOrigin Editor” components on another page with “Text” components, and the grey bar disappeared on mobile. I have also noted that on pages and posts where I have multiple “SiteOrigin Editor” components side-by-side, they grey bar on mobile gets wider. It seems that there is some form of padding or something attached to those components. Whenever I add the a component such as the “SiteOrigin Editor” component on the Page Builder, I have the option of adding custom CSS for that widget. Can you think of some CSS I could add for those to fix the padding issue, or hopefully a more systemic fix instead so that I don’t have to add that each time?
Thanks again for your help!

Cheers,
-Alex