Lifestyle Pro — viewport meta tag

[turtledove]

Hi. I've recently switched to Lifestyle Pro and when I check a bunch of my pgs with Google PageSpeed Insights, the Mobile User Experience isn't getting full marks and one of the reasons is because "Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen".

Google goes on to say that I may be able to fix this by 'configuring the viewpoint'. And to do that, they recommend that I "include a meta viewport in the head of the document, specifying the following code:

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

I've tried adding that code to my Genesis Theme Settings/Header Script box but it didn't resolve the issue. So my questions are:

1) Am I entering the code in the right place?

2) Is this the correct code?

[Christoph]

Hi,

Lifestyle Pro is setting a mobile viewport in the functions.php.

Make sure you have the following code in your functions.php:

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

Can't you make the links and buttons bigger and/or to give them more space to be tapped on?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[turtledove]

Thanks for your response Christoph. I just checked my functions.php file and the exact coding you specify is definitely in there.

Do you know if there's any other coding I have to add (in addition to what's already there)?

[Christoph]

Hi,

that code takes care of setting the mobile viewport meta tag that Google recommended.
No additional code is needed.

If Google still complains about the usability of the buttons/links it´s because it thinks they are not big enough to be easily used. If you don´t want to increase the size of them for laptop or desktop view, you could increase the sizes in the media queries for smaller screen sizes.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[turtledove]

Thanks for the clarification Christoph. I'll look into changing some of the media queries.

[turtledove]

Hey Christoph,
I'm back and am wondering if you can tell me exactly how to increase the sizes for smaller screens. I'n not at all familiar with changing css so I'm not sure how to do it in this instance.

When I checked the css file I was looking for coding that had to do with smaller screen sizes (ie 240 or 320) but there's nothing there so perhaps I have to add some coding in to include those screen sizes?

Here's what I'm seeing in my media queries section (I've only copied the parts that I think have something to do with screen sizes; after these sections, the media queries go on to the site header, sidebar, etc sections):

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

.search-form input[type="search"] {
background-image: url(images/[email protected]);
}

}

@media only screen and (max-width: 1139px) {

.footer-widgets,
.site-container,
.wrap {
max-width: 960px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 688px;
}

.content {
width: 580px;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.site-header .widget-area {
width: 380px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.home-bottom-left,
.home-bottom-right,
.sidebar-primary {
width: 272px;
}

}

@media only screen and (max-width: 1023px) {

.footer-widgets,
.site-container,
.wrap {
max-width: 772px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.content-sidebar-sidebar .content,
.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-sidebar-content .content,
.site-header .widget-area,
.title-area {
width: 100%;
}

Thanks again for your help!

[Christoph]

Hi,

you would probably want to create a new media query for sizes below 768px (Ipad size)

@media only screen and (max-width: 768px) {

and add some padding to the links, give the links a bigger font size,
add some padding to the buttons, increase the size of the buttons...

To find the css you want to change, right click on the element you want to change and select inspect element.
A new section will appear at the bottom of your browser. The left window shows the HTML elements of your page, the right window shows the css that is applied to them.
You will probably have to play around a bit to find the right css selector that will create the changes.
Once you found it and made the changes you can copy and paste them into your style.css.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[turtledove]

Thank so much Christoph! I'll give it a go.

[Author]

Posts