Skip to main content
Inspiring
October 3, 2020
Question

Table looks bad on iphone

  • 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.

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    October 8, 2020

    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
    larry45Author
    Inspiring
    October 8, 2020

    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?

    larry45Author
    Inspiring
    October 8, 2020

    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)

    larry45Author
    Inspiring
    October 7, 2020

    thanks good luck!

    Nancy OShea
    Community Expert
    Community Expert
    October 4, 2020

    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
    larry45Author
    Inspiring
    October 4, 2020

    Nancy, thanks, I pasted your code into a new page, and it did not make a grid.  It just made 15 rows.

     

    1)  So norhing I can do?  Maybe someone else help.. Just the iphone issue...  Looks fine on desktop

     

    2)  But on desktop its on left anyway to center that? I don't see a way to drag it around.

    Nancy OShea
    Community Expert
    Community Expert
    October 4, 2020

    Preview in REAL browsers, not DW.

     

     

    Nancy O'Shea— Product User & Community Expert