Hi,
I’m new at coding and I could use a little help please. :)
I’ve got a table in which I’ve organized 13 services offered by a company. Each service is in its own cell. In my html file (using td and tr tags), I’ve organized them in 3 columns and 5 rows.
The order of the services isn’t important. All I want is the number of columns to change with browser window size. I’ve put in media queries and the number of columns changes where I want it to, but the problem is that, instead of reorganizing the content in the column that’s cut, that content just disappears. So basically, it’s showing either just the first column of my table, or just the first two… instead of reorganizing the whole table content into two columns and one column (as I’d like to have it).
Hope that makes sense? You can see it here (all 13 services should always all show but in more or less columns):
http://runmelanierun.com/g/services.html
The media queries I’ve put in are (I’ve cut and pasted them from a website – I don’t fully understand them):
@media screen and (max-width: 1100px) {
table td:nth-of-type(4) {
display: none;
}
}
@media screen and (max-width: 950px) {
table td:nth-of-type(3) {
display: none;
}
}
@media screen and (max-width: 800px) {
table td:nth-of-type(2) {
display: none;
}
}
How can I adjust things so that no content is lost?
I appreciate any help! I’ve spent hours on this with no success….
Melanie
