I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles defining their width as 100% and max width of 400px. However, these settings do not seem to work on the iPhone 13, while they display fine on an iPhone 15.
https://i.sstatic.net/LX4Xxm.jpg https://i.sstatic.net/kghyrm.jpg
After trying various approaches like using overflow-x: auto; and setting image widths to 100% and max-width to 400px, the issue persists on the iPhone 13.
p.tnc {
text-align: center;
color: lightcyan;
background-color: #684c00;
padding: 3ch;
margin-top: 0cap;
font-size: large;
font-family: Verdana;
}
h1 {
text-align: left;
color: lightcyan;
background-color: #684c00;
padding: 1ch;
margin: 0cap;
font-size: x-large;
font-family: Verdana;
}
h2 {
text-align: center;
font: bold;
color: lightcyan;
background-color: #684c00;
padding: 1ch;
margin: 0cap;
font-size: xx-large;
font-family: Verdana;
}
p {
color: black;
font-size: medium;
font-family: Verdana;
font: bold;
text-align: center;
}
a {
text-decoration: none;
}
.info {
text-align: left;
color: lightcyan;
background-color: #684c00;
padding: 3ch;
margin-bottom: 0cap;
font-size: medium;
font-family: Verdana;
list-style-type: lower-greek;
text-decoration: none;
}
.contact {
color: lightcyan;
}<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="Original/angrywaspicon.png">
<link href="fpphotos.css" rel="stylesheet" />
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>FP PHOTOS</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h1>FP Photos</h1>
<h2>Photo Options</h2>
<p class="tnc">ALL IMAGES ARE $6 AND COME IN 6x4 GLOSSY PHOTO PRINTS <br>Free Shipping on All Orders!</p>
<div style="overflow-x: auto;">
<table style="width:100%;">
<tr>
<td><a href="aw.html"><img style="width="100%" src="/Original/Angry Wasp - Copy.jpg"></td></a>
<td><a href="gl.html"><img style="width="100%" src="/Original/DSC_0088.JPG"></td></a>
<td><a href="dl.html"><img style="width="100%" src="/Original/DSC_0211.JPG"></td></a>
<td><a href="wg.html"><img style="width="100%" src="/Original/DSC_0240.JPG"></td></a>
</tr>
<tr>
<td>
<p>Angry Wasp</p>
</td>
<td>
<p>Grass Lizard</p>
</td>
<td>
<p>Diamond Lizard</p>
</td>
<td>
<p>Whispering Geckos</p>
</td>
</tr>
</table>
</div>
...
(remaining HTML code removed for brevity)
</body>
</html>