After much searching on the forum, this is my first post, so I kindly ask for patience!
I am dealing with a 20-year-old website that urgently needs to be optimized for mobile devices. With almost 2200 pages, manual editing is out of the question, so I need to find a simple solution primarily using CSS.
However, even the most basic attempts at making the pages mobile-friendly seem to conflict with Google's requirements and layout preferences. For example, centering the content causes a 'Page is not mobile-friendly' message from Google.
To address these issues, I have rewritten the HTML and temporarily hard-coded the CSS directly onto the page until I can transfer it to a separate style sheet.
I started with a div width of 320px as a reference point for Google's testing. However, when trying to center the content using "margin-left: auto; margin-right: auto;", the mobile test fails. Removing the centring allows the page to pass the test.
Adjusting the div width to 100% and setting the image width to 320px passes the test but sacrifices centering. On larger mobile displays, increasing the image width results in another failure by Google. It feels like a never-ending cycle, and I'm seeking advice on how to proceed.
The code snippet below reflects the current state of the page - centered but triggering a Google fail due to content not fitting the screen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<base target="_top" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align: center; overflow-x: hidden;">
<div style="width: 320px; margin-left: auto; margin-right: auto;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" id="Popup1">
<tr>
<td width="100%">
<img border="0" src="../images/Americas/North/Native_Powhatan_Tribe01_max.jpg" alt="Test" style="max-width: 100%; width: 100%;" height="auto"><!-- Image width is 1000px --></td>
</tr>
</table>
</div>
</body>
</html>
This is the current live version of the page:
For testing purposes, here is the microsite version of the page with all of my modifications:
(The main issue seems to revolve around image sizing and the container, prompting me to strip everything else out temporarily).