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
Thumbnails all have a width of 128px but some are rather high
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
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.
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.
system
Closed
October 6, 2015, 12:50am
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.