31f5c110fc
Max-device-width will only kick in on physical devices with width smaller than 480px. It makes sense though to trigger the responsive layout on any device where the viewport is that narrow, not just ones where the device itself is that narrow. For an example of this in practice, visit barackobama.com on a desktop, resize your browser window and watch the layout change responsively.
85 lines
1.2 KiB
CSS
85 lines
1.2 KiB
CSS
@media only screen and (max-width: 480px) {
|
|
html {
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
div#header {
|
|
margin: 0 0 0.25em 0;
|
|
padding: 8px 5px;
|
|
background-color: #eee;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
div#wrapper {
|
|
padding: 0;
|
|
padding-bottom: 2em;
|
|
margin: 0;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
div#headerleft {
|
|
float: none;
|
|
}
|
|
div#headerright {
|
|
float: none;
|
|
text-align: left;
|
|
margin-left: 34px;
|
|
margin-top: 0.25em;
|
|
clear: both;
|
|
}
|
|
|
|
.headerlinks a,
|
|
#headerright .headerlinks a {
|
|
padding-right: 0.25em;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.box {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
div.voters {
|
|
width: 31px;
|
|
margin-top: 0px;
|
|
}
|
|
div.voters a.upvoter {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
div.voters a.upvoter,
|
|
div.voters a.downvoter {
|
|
margin-left: 6px;
|
|
border-width: 9px;
|
|
}
|
|
|
|
li div.details,
|
|
div.story_content {
|
|
margin-left: 36px;
|
|
margin-right: 20px;
|
|
}
|
|
div.morelink {
|
|
margin-left: 36px;
|
|
}
|
|
li.story div.byline {
|
|
font-size: 10pt;
|
|
}
|
|
|
|
div.box label {
|
|
display: block;
|
|
}
|
|
|
|
div#story_box input,
|
|
div#story_box textarea,
|
|
div#story_box #story_tags_a,
|
|
div#story_box div.markdown_help_toggler {
|
|
margin: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|