Issues with responsivness on small screens / smartphones

  • Author
    Posts
  • #1213

    Willem D’Haese
    Participant

    No problem Misplon. Thank you for making the theme and leaving me more time to do more research on monitoring and adding site content. It seems adding

    .site-content > .container {
      padding: 0 1.78571em;
    }

    solves the left margin issue. The only issue left is the site name wrapping on small sized windows. There is definitely enough room left to not wrap it at all, as the menu is collapsed to a small icon.

    Grtz

    #1214

    Andrew Misplon
    Keymaster

    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.

    #1215

    Willem D’Haese
    Participant

    It helps perfectly. Thank you very much.

    #1225

    Andrew Misplon
    Keymaster

    Super; really glad to hear that helped.

    Chat soon.

    Cheers.

    #3065

    Garden Trending
    Participant

    Hello!

    Thanks so much for creating this theme – we really love it! The only thing I can’t seem to make work correctly right now is how certain parts of the page render on mobile devices… there appears to be a width issue. There is often a grey bar on the right side, but not for all pages. It tends to be there for posts/category pages, but not for actual pages. I am not sure if there is a simple CSS solution I can add. If you want to take a look, our site is http://www.gardentrending.com.

    Thanks again!

    Cheers.

    #3069

    Andrew Misplon
    Keymaster

    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.

    #3074

    Garden Trending
    Participant

    Hi Andrew,

    Thanks for the really quick reply! I appreciate the fast support. I didn’t realize that I had that empty text widget in the footer. I have gone in and deleted it this morning, but unfortunately that grey bar on the right is still appearing below 498px in resolution. Any further guidance on how I can get that to disappear would be really appreciated.

    Thanks again!

    -Alex

    #3075

    Andrew Misplon
    Keymaster

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

    #3076

    Garden Trending
    Participant

    Great – Thanks!! Talk to you then.

    #3078

    Andrew Misplon
    Keymaster

    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.

    #3082

    Garden Trending
    Participant

    Hi Andrew. Thanks again for looking into this more. The problem does not appear on every part of the site. For actual pages like http://gardentrending.com/garden-trending-welcome/, it is fine. However for category pages like http://gardentrending.com/category/exotic-plants/orchids/, it has the scroll bar. Thanks for looking into this with us. I really appreciate your help.
    -Alex

    #3084

    Andrew Misplon
    Keymaster

    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.

    #3085

    Garden Trending
    Participant

    Hi Andrew,
    I tried adding that code into our custom CSS plugin, but it did not resolve the issue. I’d be a bit concerned too about having the ads hidden in mobile, as Google Analytics shows that the majority of our traffic is on mobile devices. I’ll try a few other things today and let you know if I have any progress. In any case, I’d really appreciate any other suggestions you can come up with.
    Cheers,
    Alex

    #3086

    Garden Trending
    Participant

    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

    #3087

    Andrew Misplon
    Keymaster

    Thanks for this Alex, taking a look now, will revert ASAP.

Viewing 15 posts - 16 through 30 (of 31 total)

You must be logged in to reply to this topic.

Scroll to top