Modifying a table for use on an iPad

[KW1]

I am developing a site that is using tables to display 8 images (two rows of four). The table functions well on a desktop, but has no responsivity.

I came across this [article](https://css-tricks.com/responsive-data-tables/ “article”) and appreciated the simplicity of the solution. I was able to insert the following code:
@media only screen and (max-width:480px){
table,thead,tbody,tfoot,th,td,tr{display:block}
tr+tr{margin-top:1em}
}

That worked fine to create one column with 8 “rows” for the iPhone display.

On a tablet, it looks weird, either we lose columns or end up with one column and much white space.

Any simple ideas on how to format the above code to create 2 columns?

Sorry if this is painfully obvious. I don’t know how to write code, I know how to copy, paste, and test. So far, that has helped me customize my website a great deal!

Thanks for the help.

[Paulie_D]

Here’s the thing…I wouldn’t start with a table to display images…there are much better solutions that will work better ‘out of the box’ for desktop and mobile.

Once you have told a table to do something (have 4 columns for instance)…that’s it, you can’t suddenly tell it to have only 2 columns.

If you could let us look at your existing site (with a link) we might be able to help further.

[Author]

Posts