Table in smartphone layout

1 Views

I have a table with some images, and it’s showed pretty good on the PC, but if i view my website with the smartphone the table is too large and it ruin all the mobile layout, there’s some way to fix it?

This is the link so you can see the problem: http://www.animeshare.it/lista-anime/.

Read More

I’d like to fit the number of columns based on the screen width.

Post Views: 1

Related posts

1 comment

  1. That’s really hard to do with a table layout. I’m not sure if you are required to use a table, but I would suggest using the CSS3 flex-box model instead for better mobile compatibility.

    In the example below, the contents of the #grid div will wrap depending on the size of the #grid div.

    HTML

    <div id="container">
    <div id="grid">
        <div class="animeCell"><img src="" /><br />label 1</div>
        <div class="animeCell"><img src="" /><br />label 2</div>
        <div class="animeCell"><img src="" /><br />label 3</div>
        <div class="animeCell"><img src="" /><br />label 4</div>
        <div class="animeCell"><img src="" /><br />label 5</div>
        <div class="animeCell"><img src="" /><br />label 6</div>
        <div class="animeCell"><img src="" /><br />label 7</div>
    </div>
</div>

    CSS

    #grid {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #999;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
}

#grid .animeCell {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ddd;
    text-align: center;
}

#grid .animeCell img {
    width: 150px;
    height: 200px;
}

    Please see my working fiddle here, I hope it helps.

    NOTE: Flex-box is not without bugs since it’s a relatively new specification, you can learn more here.

Comments are closed.