[rtiozzoParticipant]

Hi,
I was wondering where exactly I add this code from Google PageSpeed recommendations from this link:

https://developers.google.com/speed/docs/insights/ConfigureViewport

Here is the code I need to add:
<meta name=viewport content=”width=device-width, initial-scale=1″>

Do I go into the Editor/header.php ?

I’ve done that but it didn’t work. Am I doing it right? My code looks like this now:

<?// =============================================================================
// HEADER.PHP
// —————————————————————————–
// The site header. Variable output across different stacks.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack’s index, first go to “views”
// inside the “framework” subdirectory. Once inside, find your Stack’s folder
// and look for a file called “wp-header.php,” where you’ll be able to find the
// appropriate output.
// =============================================================================

?>

<?php x_get_view( X_STACK, ‘wp’, ‘header’ ); ?>

<meta name=viewport content=”width=device-width, initial-scale=1″>

[RadModerator]

Hi there,

Thanks for posting in.

There is no need to add that as X already have that from it’s /framework/views/global/_header.php

Cheers!

[rtiozzoParticipant]

OK. Thanks. But how I fix all these errors? I tried everything but it is not working.

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 648 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:
The element <iframe src=”//www.youtube.…znNt5M9Q?rel=0″> falls outside the viewport.
The element <iframe src=”https://mapsen…w.k7Z4JmtnLjQU”> falls outside the viewport.
The element <iframe src=”//www.youtube.…ed/lWnKFyvvlpQ”> falls outside the viewport.
The element falls outside the viewport.
The element <input type=”text” name=”your-name” class=”wpcf7-form-con…es-as-required”> falls outside the viewport.
The element <input type=”email” name=”your-email” class=”wpcf7-form-con…dates-as-email”> falls outside the viewport.
The element <input type=”text” name=”your-subject” class=”wpcf7-form-control wpcf7-text”> falls outside the viewport.
The element <textarea class=”wpcf7-form-con…wpcf7-textarea”> falls outside the viewport.

[RadModerator]

Hi there,

It means that those element are not responsive. The layout respond from 320px to higher size, but those content aren’t responding to 320px and they are fixed to 648px;

Have you tried using video embed shortcode and map embed shortcode? These shortcode should make your video and map respond to any size.

And about your contact form styling, you must make sure that their width are responsive. Would you mind providing the url address of your contact page, or any page that has form? I’ll check if possible with quick fix, if not then you may consult a developer.

Thanks!

[rtiozzoParticipant]

Hi,

I am using video embed shortcode and map embed shortcode. Each time I do a new analysis in Google PageSpeed a new error comes up. Strange!

I am using contact form 7 from your Ethos demo content. Scroll down to the bottom of my page andh ave a look at my contact section at http://www.beatlesone.com

Please have a look for me.

Thanks mate

[RadModerator]

Hi there,

I just checked your site and yes, embeds are responsive. But I think PageSpeed does not actually fetch the resulting embed size. Instead it’s reading the value added in iframe ( eg. width and height ). Please try removing these attribute value from your iframe embed.

Thanks.

[rtiozzoParticipant]

Hi,
It worked with everything except this one element. How do I locate it?

The element falls outside the viewport.

Thanks you ever so much

[Paul RModerator]

Hi,

Image is not working.
Please send it again.

Thanks

[fernandocd79Participant]

Hi guys,

I’m getting this pagespeed insights error:
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 445 CSS pixels wide, but the viewport is only 375 CSS pixels wide.

How do I set the viewport?

My site is http://www.spanishgurus.com

Best regards

Fernando

[Paul RModerator]

Hi Fernando,

It looks like your spacing table is the one that is causing the problem.

You can try adding this under Custom > CSS in the Customizer.

@media (max-width: 480px) {
.spacing-table {
    font-size: 18px;
}
}

Hope that helps.

[fernandocd79Participant]

The problem persists. Also the social buttons at the footer in the mobile version create a UX problem too

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 445 CSS pixels wide, but the viewport is only 375 CSS pixels wide.

Size tap targets appropriately
Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.
The following tap targets are close to other nearby tap targets and may need additional spacing around them.
The tap target and 3 others are close to other tap targets.

[RadModerator]

Hi there,

Mobile’s viewport is always equal to its screen size. It can’t or shouldn’t be changed. What you need is to fix your content and make its width equal to your screen size.

The main and another element causing this is your headlines. Please use custom headlines with responsive text support, instead of adding headlines within text element.

You should able to find responsive text feature under your cornerstone’s settings section. And please check this similar sample http://theme.co/x/demo/integrity/1/shortcodes/responsive-text/. You don’t have to implement the shortcode if you’ll use cornerstone’s responsive text feature. But implementation and options should be the same.

Thanks!

[Author]

Posts