- This topic has 30 replies, 3 voices, and was last updated 8 years, 7 months ago by Andrew Misplon.
Tagged: comments responsive ultra
- AuthorPosts
- April 18, 2015 at 7:54 pm #1213
Willem D’HaeseParticipantNo 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
April 18, 2015 at 8:20 pm #1214
Andrew MisplonKeymasterSuper, 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.
April 19, 2015 at 8:38 pm #1215
Willem D’HaeseParticipantIt helps perfectly. Thank you very much.
April 20, 2015 at 4:14 pm #1225
Andrew MisplonKeymasterSuper; really glad to hear that helped.
Chat soon.
Cheers.
February 14, 2016 at 8:36 pm #3065
Garden TrendingParticipantHello!
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.
February 15, 2016 at 10:58 am #3069
Andrew MisplonKeymasterHi 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 emptyText
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.February 15, 2016 at 4:49 pm #3074
Garden TrendingParticipantHi 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
February 15, 2016 at 4:54 pm #3075
Andrew MisplonKeymasterThanks for your feedback. I’ll be able to test further this evening (GMT+2) and will report back then. Chat in a bit 🙂
February 15, 2016 at 4:55 pm #3076
Garden TrendingParticipantGreat – Thanks!! Talk to you then.
February 16, 2016 at 11:26 am #3078
Andrew MisplonKeymasterSorry 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.
February 16, 2016 at 10:06 pm #3082
Garden TrendingParticipantHi 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.
-AlexFebruary 16, 2016 at 10:12 pm #3084
Andrew MisplonKeymasterFor 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.
February 16, 2016 at 10:25 pm #3085
Garden TrendingParticipantHi 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,
AlexFebruary 17, 2016 at 7:00 am #3086
Garden TrendingParticipantHi 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,
-AlexFebruary 17, 2016 at 2:32 pm #3087
Andrew MisplonKeymasterThanks for this Alex, taking a look now, will revert ASAP.
- AuthorPosts
You must be logged in to reply to this topic.