- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.