7-Columns and Google Mobile Friendly but


#1

Eventually managed to get these calendar pages to conform and the most welcome notification:

"Awesome! This page is mobile-friendly."

There is still work to be done on the thumbnails and believe me I have tried frowning

Thumbnails all have a width of 128px but some are rather high frowning

Any suggestions?

.calendar     {background-color:#fff; border-collapse: collapse;} 

.top_calendar {margin:8em 0 0 0}
.caps         {text-transform:capitalize}
tbody 
tr:first-child th{float:left; text-align:left; font-size:small; border:0}
th            {background-color:#eee;}
td            {width:14%; height:132px; outline:solid 1px #ddd;
               text-align:center; vertical-align:middle; 
               position:relative; line-height:1.2;}

td {word-wrap: break-word; font-size:small;
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
td img   {width:88%; max-height:128px;  margin:1.2em auto 0.2em;}
td a     {padding:0 0.42em;} 
td:hover {background: #F3F3F3;}
.day_listing{display: inline-block; position:absolute; top:0; right:0.2em;}

#no_jokes {width:42%; margin:2.2em auto 8em; text-align:center; border:solid 5px #ccc}

Screen dump using FireFox -> Developer -> Responsive Design - Crtl-Shft-M


#2

Hi John,

I'm not quite sure what you are asking as you are obviously limited in that table by the content you are using but for tables on mobile I usually linearise the table and use this method.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.mytable{
	width:100%;
	margin:0 auto;
	max-width:960px;
	border-collapse:collapse;
}
.mytable td{
	border:1px solid #000;
	padding:10px;
	vertical-align:top;
}
p{margin:0 0 1em}

@media screen and (max-width:601px) {
	table.mobile-optimised {
		word-wrap:break-word;
	}
	table.mobile-optimised thead {
		display:none
	}
	table.mobile-optimised td {
		display:block;
		float:left;/* ie9 and under hack */
		width:100%;
		clear:both;
		background:#f5f5f5;
		padding:10px 5px;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}
	table.mobile-optimised tbody, table.mobile-optimised tr {
		display:block
	}
	.mobile-optimised td:before {
		content:attr(data-th);
		display:block;
		font-weight:bold;
		margin:0 0 2px;
		color:#000;
	}
	.mobile-optimised tbody tr {
		border-bottom:1px solid #00c0f3
	}
}
</style>
</head>

<body>
<table class="mytable mobile-optimised" >
		<thead>
				<tr>
						<th scope="col">Name </th>
						<th scope="col">Company</th>
						<th scope="col">Description</th>
				</tr>
		</thead>
		<tbody>
				<tr>
						<td data-th="Name">Paul OB</td>
						<td data-th="Company">Acme Trading</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p></td>
				</tr>
				<tr>
						<td data-th="Name">Fred Flinstone</td>
						<td data-th="Company">Bedrock</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis lobortis libero.</p></td>
				</tr>
				<tr>
						<td data-th="Name">Paul OB</td>
						<td data-th="Company">Acme Trading</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
				</tr>
		</tbody>
</table>
</body>
</html>

It makes the table much easier to use on mobile as you can just have one item across and vertical scrolling is easy on mobile.


#3

Hi Paul,

Many thanks, it works a treat and there were not a lot of changes required to fit into the existing CSS.

7-column calendar RWD

It is still a little rough around the edges which I hope to fix tomorrow.


#4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.