Table looks bad on iphone

Forum|Forum|5 years ago
October 3, 2020
3 replies
3868 views

I created a 5x5 table and inserted it into an html page with text-- above all text. Looks fine on desktop, but on iphone, the table of images is superimposed on top of the text; so I'm stumped.

Google does say its mobile friendly.

This topic has been closed for replies.

Nancy OShea

Community Expert

Larry4545,

Next time you want to post a URL here, run it through Tiny URL first. It's a free online service that not only shortens longs URLs but changes them so they are not recognizable. I've gotta run now.

Nancy O'Shea— Product User & Community Expert

L

larry45Author

Inspiring

Ok Nancy good idea. The CSS version on iphone, no grid, just long vertical, my guess is that is the way it is trade off?

L

larry45Author

Inspiring

PS Nancy and Osgood, if go homepage, and scroll, not 1st headshot link at top, but the one near bottom (between travel and corporate), you see the desktop version is ok, except how center that? And then look on ihpone and how get it off the text? (look fine/ perfect in DW)

L

larry45Author

Inspiring

thanks good luck!

Nancy OShea

Community Expert

Not surprising. Tables are not responsive. Nobody uses tables anymore if we can possibly avoid them.

Try CSS Grids.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
}
</style>
</head>

<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert