Community Forums › Forums › Archived Forums › Design Tips and Tricks › Trouble with body class on Foodie theme
Tagged: foodie, mobile, responsive
- This topic has 12 replies, 2 voices, and was last updated 9 years, 10 months ago by Kimberly.
-
AuthorPosts
-
June 29, 2014 at 12:02 pm #111994KimberlyParticipant
Hi!
I have the Foodie theme but I removed the mobile responsive settings for it. It's a decision I made based upon what I like seeing for the green and recipes sites I like to visit. I know all of the arguments for keeping it mobile, but this is the way I like it 🙂
Anyhow, something is awry when the site is viewed on a mobile browser in the top-ad div class.
Screenshot:
Full size: http://theysmell.com/wp-content/uploads/2014/06/photo.pngThe 728x90 ad on top is shifted and shrunk on mobile screens.
I can see WHY but I don't know how to fix it. There is a body class setting with the width much less than the site-container width. This width changes as the screen size changes but is always smaller and left aligned.
Screenshot:
Full size: http://theysmell.com/wp-content/uploads/2014/06/Untitled-21.jpgAny thoughts on how I fix this?
Thanks!
http://theysmell.comJune 29, 2014 at 5:15 pm #112027AnitaKeymasterSomething a bit more accurate would be to use the mobile response tool in Firefox. Open the site in Firefox. Then hit Ctrl+Shift+M at the same time. It will then convert to mobile. You can select the sizes and flip back and forth plus create a custom size. Try that. I see that perfectly centered.
Love coffee, chocolate and my Bella!
June 30, 2014 at 7:13 am #112088KimberlyParticipantThanks for that tool, but I still need to fix that on my actual mobile devices (first screenshot) it shows up off-center and scaled. I tried a couple of other tools and it displays fine but on the actual devices it doesn't.
June 30, 2014 at 8:44 am #112091AnitaKeymasterWhat mobile device do you have that looks like that. We cannot use the tool you are using because mobile actions are dictated by an actual mobile device.
Love coffee, chocolate and my Bella!
June 30, 2014 at 8:58 am #112092AnitaKeymasterOpening up the Top Ad widget area and viewing the contents of the text widget identified as Text-64, you have multiple ad types in that box. You will need to trouble shoot this by removing the code and adding each code back in there one at a time. If it works on the first one, then works the second, but then stops on the third code - then the third code is your issue. Here is a screen shot of what all that looks like to me on my end - https://www.dropbox.com/s/n39nirpph7u4ecc/text-64%20content.PNG.
Love coffee, chocolate and my Bella!
June 30, 2014 at 9:19 am #112095KimberlyParticipantI appreciate your help so far!
iPad and iPhone are what I am using. It is happening on the Kindle Fire too.
There is only a single small ad code in the widget for the top-ad, so whatever they are doing with their javascript is what is showing those multiple codes.
I removed the ad code completely and just put text in and the same thing happens.
Screenshot from iPad:
full size: http://theysmell.com/wp-content/uploads/2014/06/photo1.png
If you look at my second screenshot in the original post, in EACH VIEW (320, 768, etc) the ad is defined by that highlighted body class that is changing width depending upon the device.
So somewhere I am led to believe this theme has this body class defined. But why is it showing up when I removed the responsive setting from my functions.php?
Thanks again for trying to help!
June 30, 2014 at 9:26 am #112096AnitaKeymasterYou have minify turned on so I cannot see your style.css file. So you removed this from the functions:
//* Add viewport meta tag for mobile browsers. add_theme_support( 'genesis-responsive-viewport' );
But did you also remove everything related to the Media Queries in the style.css sheet?
/* Media Queries ---------------------------------------------------------------------------------------------------- */
Love coffee, chocolate and my Bella!
June 30, 2014 at 9:54 am #112100AnitaKeymasterOkay, I think I found it. See the width of 728px !important? Change that to 1140px. When I did this in Firefox, it fixed it.
.top-ad { clear: both; margin: 0 auto; overflow: visible; padding: 10px 0; width: 728px !important; }
Love coffee, chocolate and my Bella!
June 30, 2014 at 10:53 am #112112KimberlyParticipantYes I removed everything from the CSS as well.
I actually added that width setting in AFTER trying to force it and it didn't work. I removed it just now to double check and have the same issue. 🙁
June 30, 2014 at 10:58 am #112116AnitaKeymasterOhhhhh, deactivate the minify and clear your cache and try again.
Love coffee, chocolate and my Bella!
June 30, 2014 at 1:01 pm #112143KimberlyParticipantI disabled minify and cleared cache and it is still happening.
Thank you for trying to help so much, I do appreciate your time.
June 30, 2014 at 1:27 pm #112149AnitaKeymasterSoooo... I think you might need to check with Shay Bocks, the theme developer then. Maybe she can assist you on that. I just can find it then. On that width of 1140px - add !important after it. See if it changes.
Love coffee, chocolate and my Bella!
June 30, 2014 at 1:37 pm #112152KimberlyParticipantThanks again for your help, all that does is shift it the other way LOL.
I will submit a ticket over at her site, thank you.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.