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″>

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!

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”&gt; 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.

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!

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

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.

The element falls outside the viewport.

Thanks you ever so much

Image is not working.
Please send it again.

Thanks

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

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.