Size content to viewport - Support | Kriesi.at

Tagged: mobile issues, mobile menu, viewport

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 6, 2015 at 6:48 pm #392195

PrivateLabel
Participant

Hi,
It seems i’m having trouble with this on google speed test it shows these errors http://www.macenylaw.com/disillusioned-from-judicial-politics/
on 30 other pages as well, I get the same error. I ran the test on your demo site and I did not get this error. How do I go about fixing this problem?

Size content to viewport
The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.
The page content is 480 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
The element Home falls outside the viewport.
The element About Mace falls outside the viewport.
The element Bio falls outside the viewport.
The element Profile falls outside the viewport.
The element Philosophy falls outside the viewport.
The element Industry Groups & Affiliations falls outside the viewport.
The element Areas of Practice falls outside the viewport.
The element Child Custody falls outside the viewport.
The element Child Support falls outside the viewport.
The element Discovery falls outside the viewport.
The element Divorce falls outside the viewport.

February 6, 2015 at 7:10 pm #392206
Remco Geelen
Participant
Beware! A non-tech answer:

Horizontal scrolling? Which never actually happens, when resizing. Right?
So Google is seeing things that aren’t actually happening. Right?
Furthermore, the site looks absolutely normal.
Yet, when resizing, in a certain range of sizes, the menu and logo overlap.
So I wonder… does Google give you the same notice when

a. you temporarily remove e.g. the utter right three 3 menu links?
b. you temporarily make the site full-width instead of boxed?
c. you upload a temporary 1×1 pixels logo?
d. you temporarily set the page width to, say, 1400 pixels?

Sorry. Not an answer. But a logical path to diagnosis and potential fix/solution. Cheers!!
- This reply was modified 9 years, 9 months ago by Remco Geelen.
February 8, 2015 at 6:05 am #392627

Rikard
Keymaster

Hey PrivateLabel!

You’re most likely getting those error because of a slight bug with the menu on mobile devices which will be fixed in the next release. You can add the following code to Quick CSS if you want to fix it before then:

#wrap_all { position: relative !important; }

Cheers!
Rikard

February 9, 2015 at 4:38 pm #393127

PrivateLabel
Participant

@Remco, I’ve tried your solutions and they didn’t work, no luck.

Hey Rikard,
I actually tried this solution because I saw another thread had a similar error. Mine is a bit different as in the menu works like your demo but when I go to google analyze your demo you don’t get that same error with the user experience score.

adding this #wrap_all snippet to the css made the user experience score jump from 93-91

What I think google is reading is that since the menu lives on the right hand of the page but hidden until the user clicks on the menu icon it counts that as an error?

February 10, 2015 at 7:26 am #393517

Rikard
Keymaster

Hi PrivateLabel!

It’s very difficult to say what their criteria are, but I agree with your analysis. As long as you think the user experience is good your site, I wouldn’t care much about what Google thinks…

Regards,
Rikard

February 10, 2015 at 4:41 pm #393761

PrivateLabel
Participant

Hi Rikard,

So I’m guessing there’s no fix for this? I didn’t make any changes to the menu except for a few css changes to make the height between menu items a bit taller. It’s the default menu straight from the theme. So I’m just wondering why you guys don’t have the same error.

February 11, 2015 at 11:12 am #394201
Ismael
Moderator
Hey!

Since the default menu causes the issue, try to remove it on mobile device. Add this to the functions.php:
```
add_action('wp_footer', 'ava_remove_menu', 10);
function ava_remove_menu(){
?>
<script>
(function($){
	$(window).load(function() {
		if($(window).width() <= 480) {
			var menu = $('.main_menu');			
			$(menu).remove();
		}
	});
})(jQuery);
</script>
<?php
}
```
Regards,
Ismael
February 11, 2015 at 5:00 pm #394457

PrivateLabel
Participant

Hi Ismael,

I added the code to functions.php and I’m still getting the error

Did i do something wrong?

February 12, 2015 at 4:30 am #394821

Rikard
Keymaster

Hi!

Your score is based on Google’s last crawl of your site so the results won’t be instant. I think you have to wait at least a few days, if not more, to see the results from removing the menu.

Best regards,
Rikard

February 12, 2015 at 4:49 pm #395140

PrivateLabel
Participant

Hi,

I see, thank you for the help, I will wait and see what happens to see if google picks it up. It just that I keep getting more page errors from google as time goes.

February 13, 2015 at 6:37 am #395522

Rikard
Keymaster

Hey!

Ok great, keep us posted if this reduces the errors or not.

Regards,
Rikard
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.