OSQA responsive layout

custom-head.html

<meta name="viewport" content="width=device-width, initial-scale=1">

custom.css

body {
  font-family: Arial, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  margin: 0;
  min-width: 320px;
}

/* Align logo to the main tab buttons */
#logo { margin-top: 50px }

/* Style tab buttons */
#nav a, #nav a#nav_ask { border:none; border-radius: 2px; font-size:1.4em; font-weight:800; line-height:1.5em;}
#nav a:hover, #nav a#nav_ask:hover { background-color: #4199E6; color:#fff; text-decoration:none; }
#nav a.on { border:1px; font-size:1.4em; font-weight:800; background-color: #4199E6; color:#fff; }

/* Prettify a bit the user links at the top */
#roof { height:26px; background-color: #e5ebf8; }
#top a { font-weight:bold; text-decoration:none; padding: 8px 8px 0 0; }

#searchBar { width:95%; background-color:#fff; border:0; padding-bottom:2.5em; display:inline-block; text-align:center; }
#searchBar form { margin:0; padding:0; clear:none;}
#searchBar form div { display:inline-block; }
#searchBar .searchInput { border:1px solid #888; }
#searchBar .searchBtn { font-family:Arial; font-weight:800; font-size:1.2em; }
#searchBar form .options { font-size:0.8em; }

/* Feed icon is too high */
a.feed-icon { margin-top:8px }

/* Style questions sorting tabs (active, hot, ...) */
.headQuestions { font-size:1.6em }
.tabBar { border-bottom:1px solid #444; margin-bottom:6px; }
.tabsA a { background-color: #fff; border:0px; margin-top:9px; }
.tabsA a.on { border:1px solid #444; border-bottom: 1px solid white; }

.short-summary .counts .item-count { font-size: 1.8em; }
a#favorite-mark, a.accept-answer, .post-score { padding-top:5px; padding-bottom:5px; }

/* Hide the ugly default footer */
div#ground { display:none; }

div#cc-footer { text-align:center; }

/* FAQ and info pages */
div#CAFull .content p { font-size:1.2em; }
div#CAFull .headNormal { font-size: 1.6em; }

div#announcement { text-align: center; font-size:1.2em; background-color: #b44; color: #fff; padding:4px; height:20px; font-weight:800; margin-top:10px; margin-bottom: 10px; border-radius:4px; }

@media all and (max-width:880px) {
  body { width:device-width; }
  img { max-width:100%; overflow:hidden; }
  #logo { width:100%; text-align:center; margin-bottom:1em; }
  #roof, #top { float:none; clear:both; width:auto; }
  #top { text-align:center; margin-top:1em; }
  #top a { font-size:1.3em }
  #nav { float:none; clear:both; width:auto; margin-top:1em; }
  #announcement { display:none; }
  .boxA { display:none; }
  .boxC { width:auto; float:none; }
  #CAFull, #CALeft, #CARight, #wrapper, .tabBar, .tabsA, #searchtags, #listA, .short-summary, .userinfo, .short-summary .counts, .short-summary .question-summary-wrapper { clear:both; float:none; width:auto; }
  .headQuestions, .tabBar, .tabsA { border:0; margin-left:3%; margin-right:3%;}
  #listA { padding-top:1em; }
  .tabsA { border-bottom:1px solid #888; }
  .tabsA a { background-color: #fff; border:0; }
  .tabsA a.on { background-color:#f90; color:#fff; }
  .short-summary { margin-left:3%; margin-right:3%; padding-top:1em; font-size: 135% }
  .question-summary-wrapper h2 { padding-top:0.6em; }
  .question-summary-wrapper h2 a { font-size:110%; }
  h3 { font-size: 150%; }
  .tags a { font-size: 110%; }
  #recent-tags a { font-size: 150%; }
  #searchBar .searchInput { width:60% }
  #searchBar .searchBtn { width:35%; height:3em; }
}