Photo Album Page is not mobile friendly

Web site go4doxies.com is noted as not mobile friendly by google search console. This is for pages that are photo album plugin pages. Theme is Reason. Rapid Weaver simulate does not show the issue for iphone, but an actual iphone does. When viewing a photo album page, it is ok, but if you click on a photo, it shrinks the image a lot and makes it not usable on the iphone. I really do not need the click feature but it is built into the photo album. Here is a specific link https://www.go4doxies.com/photos-2/files/page5-1014-full.html. Thanks Ed

There are several things that can cause a non-mobile friendly marking.
To name a few:

  1. Touch elements too close
  2. Content not sized to viewport
  3. Viewport not configured or Mobile viewport not set
  4. Small font size or Text too small to read
  5. Links too close together
  6. Content wider than screen

In your case, it appears you may have found a bug in the built-in Photo album plugin. I don’t use it myself, but I ran your page through the Google Mobile-Friendly Test Tool, and on the page that is the Album Page https://www.go4doxies.com/photos-2/files/page5-1014-full.html Two errors come up:

  • Viewport not set
  • Text too small to read

I then checked your home page - and no errors.

So I did a Quick test in RapidWeaver, and It looks as though the Photo Album Plugin (Built-in) is dropping the some if not all the head sections meta tags.

That, I think, is causing both of those errors.

So @dan @tpbradley @Aaron I think you guys have an error in the built-in Photo-Album Plugin.

So Ed(@EdF),
You could attempt to fix that until RealMac has a fix out. I just tried it in a simple test, but it does seem to work.

Add the following line of code to the head section of the Photo album page:

<meta id="res" name="viewport" content="initial-scale=1 maximum-scale=1">

2019-11-23_14-06-28

I see the picture issue you pointed out, but I’m not sure the fix above will help with the picture size.

Could you give a screenshot of the photo albums settings?

2019-11-23_13-40-23

1 Like

Thank you very much! I had tried the viewport thing, but did it on all pages and it was somewhat different code.

Ed

I copied that meta tag from the home page of your site. It’s the one built into the theme you are using that RapidWeaver seems to be dropping on the photo album plugin.

As for the screenshot you gave me the settings look okay. The images on your site look to be 350px wide. So I don’t think the Photo Album would be able to make them wider than they are. I think if you get the viewport problem working it may look better than it does.

Doug

The viewport patch didn’t seem to work. Google still gives error (on both) I probably did something wrong.

Ed

Doug,

Width is correct. Will keep looking.

Ed

Ed,

I’m not sure on the link you gave above (it’s an empty white picture):
https://www.go4doxies.com/photos-2/files/page5-1014-full.html
I tried a couple of links and the main photo album page and they seem to work:
Main Photo Album: https://search.google.com/test/mobile-friendly
https://www.go4doxies.com/photos-2/files/page5-1004-full.html
https://www.go4doxies.com/photos-2/files/page5-1001-full.html

Google tester:
https://search.google.com/test/mobile-friendly

1 Like

The link is exactly what google sent. I checked the page on my phone it is working correctly on it. It wasn’t before. So I think you have fixed it.

I noticed it didn’t match any files. I do believe it is fixed due to your good help. Thanks Again. Will wait for google to scan again.

Doug, need to go and see if there is such a page on the site. At least the other pages display correctly due to viewport addition. Thanks again, Ed

1 Like

I did some more checking. This is where they think there is an issue:

	<meta name="generator" content="RapidWeaver" />
	<link rel="stylesheet" type="text/css" href="../../rw_common/themes/reason/consolidated.css" /><style type="text/css" media="all">.thumbnail-caption {font-size: 20px !important; }</style><script src="../../rw_common/themes/reason/javascript.js"></script>
	<title>Check Out Our Puppies</title>
</head>

<body class="photo-background">

	<div class="photo-navigation">
		<p class="photo-title">Check Out Our Puppies</p>
		<p class="photo-caption">   </p>
		<p class="photo-links"><a href="../index.html">Home</a> | <a href="page5-1013-full.html">Previous</a></p>
	</div>
	
	<img class="photo-frame" src="page5-1014-full.jpg" alt="   " width="311" height="208"/>

I think you’ll need to be a bit more specific. Who’s they? And what do you think is the issue?

I thought I was replying to the previous conversation. This is where Google Console is saying I have a problem with the page not being mobile friendly. I have already installed the viewport code in the head of all photo album pages. It fixed any issues with clicking on the photos. I sent a note to Google saying I didn’t think the complaint was right. No response yet. The complaint is about a photo frame. Just thought I would check one more time if any other suggestions.

When I looked at your site I don’t see where that link is coming from? It’s an empty page at the end of the album. If you hit the Previous button it goes to what should be the last page in the album.

I don’t know what your project file looks like, but since you only have 5 pages in the album, you might consider deleting the album page and recreating it. I don’t use the built-in album so I don’t know much about it.

Well, it is small, may work. The white page is apparently the background/photo frame for the photos. See code below, if interested. You are being most helpful, but you don’t have experience with photo album. I will try your suggestion.

Sorry I already sent that to you.

I use stacks for about everything.

I’ve tried the photo album out and it should work for you. I don’t get that blank white picture at the end of the album.

I’m assuming you’re not seeing an extra picture in edit mode?

Doug, don’t assume anything. When I hover the mouse over positions where three photos could be, two of them show a blank page when hovering and right clicking. Not sure how to get rid of though. I suppose restart the page.

Must be the issue. Yes, stacks are the preferred way to go.

Thanks, Ed

1 Like

Doug, I wasn’t looking in edit mode. I had added blank photos on the bottom all three photo pages. I can delete, I wasn’t in edit mode. They are used for filler. Apparently can’t do that? I guess google doesn’t like blank photos.

Thanks Again

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.