Skip to main content
Inspiring
Oct 3, 2020 10:26 PM UTC
Question

Table looks bad on iphone

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 is closed to new replies. Start a new post to keep the conversation going.

    64 replies

    Nancy OShea
    Community Expert
    Community Expert
    Oct 8, 2020 1:06 AM UTC

    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. 

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    larry45Author
    Inspiring
    Oct 8, 2020 1:25 AM UTC

    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?

    Translate
    larry45Author
    Inspiring
    Oct 8, 2020 3:00 AM UTC

    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)

    Translate
    larry45Author
    Inspiring
    Oct 7, 2020 11:16 PM UTC

    thanks good luck!

    Translate
    Nancy OShea
    Community Expert
    Community Expert
    Oct 4, 2020 12:06 AM UTC

    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>
    

     

     

     

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    larry45Author
    Inspiring
    Oct 4, 2020 12:16 AM UTC

    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.

    Translate
    Nancy OShea
    Community Expert
    Community Expert
    Oct 4, 2020 12:32 AM UTC

    Preview in REAL browsers, not DW.

     

     

    Translate
    Nancy O'Shea— Product User & Community Expert