🕸Fergus Duniho wrote on Sun, Aug 30, 2015 06:06 PM UTC:
If you have to make a choice between multi-column or single-column, I would recommend single-column, because multi-columns are harder to read on a phone than single columns are on a widescreen monitor, but it's not necessary to make that choice. You can have multi-columns on a wide screen and single columns on a phone by replacing TABLEs with DIVs that are designed to fill multiple columns on a wide display but to stack up on a narrow display. Technically, a DIV would replace the TD in the table, not the whole table. I have done this on the Game Courier homepage. On that page, I have used the CSS classes DIV.left and DIV.right to align DIVs. On a wide screen, they show up parallel to each other in two columns, thanks to this CSS code:
But on a narrow screen, they stack up, thanks to this CSS code:
@media all and (max-width: 1506px) {
DIV.left {width: 100%; clear: both;}
DIV.right {width: 100%; clear: both;}
}
You can determine what the max-width value should be by calculating how much space is required to display both columns side-by-side.
It's also best to keep the maximum width of each column at or below what would fit on a phone screen. Theoretically, this is 480 pixils, but the diagrams on the Shogi page are under that in width yet still appear wider than my phone's screen when I look at that page. I'll report back after I've fixed that page for mobile screens.
If you have to make a choice between multi-column or single-column, I would recommend single-column, because multi-columns are harder to read on a phone than single columns are on a widescreen monitor, but it's not necessary to make that choice. You can have multi-columns on a wide screen and single columns on a phone by replacing TABLEs with DIVs that are designed to fill multiple columns on a wide display but to stack up on a narrow display. Technically, a DIV would replace the TD in the table, not the whole table. I have done this on the Game Courier homepage. On that page, I have used the CSS classes DIV.left and DIV.right to align DIVs. On a wide screen, they show up parallel to each other in two columns, thanks to this CSS code:
DIV.left {width:49%; float: left; } DIV.right {width: 49%; float: right; }But on a narrow screen, they stack up, thanks to this CSS code:@media all and (max-width: 1506px) { DIV.left {width: 100%; clear: both;} DIV.right {width: 100%; clear: both;} }You can determine what the max-width value should be by calculating how much space is required to display both columns side-by-side. It's also best to keep the maximum width of each column at or below what would fit on a phone screen. Theoretically, this is 480 pixils, but the diagrams on the Shogi page are under that in width yet still appear wider than my phone's screen when I look at that page. I'll report back after I've fixed that page for mobile screens.