Skip to content

Instantly share code, notes, and snippets.

@elidickinson
Created July 12, 2012 20:20
Show Gist options
  • Select an option

  • Save elidickinson/3100696 to your computer and use it in GitHub Desktop.

Select an option

Save elidickinson/3100696 to your computer and use it in GitHub Desktop.
Tisa theme bugfix for single column 3.4.1
@media screen and (max-width: 980px) {
/************************************************************************************
STRUCTURE
*************************************************************************************/
.pagewidth {
max-width: 94%;
}
/* content */
#content {
margin: 7% 0 5%;
}
.sidebar1 #content {
max-width: 67.8%;
}
/* sidebar */
#sidebar {
margin: 7% 0 5%;
max-width: 26.2%;
}
#sidebar .secondary {
max-width: 47%;
}
/************************************************************************************
GRID
*************************************************************************************/
.col4-1,
.col4-2,
.col4-3,
.col3-1,
.col3-2,
.col2-1
{
margin-left: 2%;
}
.col4-1 {
max-width: 23%;
}
.col4-2, .col2-1 {
max-width: 48%;
}
.col4-3 {
max-width: 72%;
}
.col3-1 {
max-width: 31%;
}
.col3-2 {
max-width: 62%;
}
/************************************************************************************
SLIDER
*************************************************************************************/
#slider img {
max-width: 98.5%;
}
/************************************************************************************
LAYOUTS
*************************************************************************************/
/* grid4 */
.grid4 .post {
width: 23.125%;
margin-left: 2.5%;
}
/* grid3 */
.grid3 .post {
width: 31%;
margin-left: 3.5%;
}
/* grid2 */
.grid2 .post {
width: 48%;
margin-left: 3.75%;
}
}
@media screen and (max-width: 760px) {
/************************************************************************************
STRUCTURE
*************************************************************************************/
#content {
width: 100%;
max-width: 100%;
float: none;
clear: both;
}
.sidebar1 #content {
width: 100%;
}
/* sidebar */
#sidebar {
width: 100%;
max-width: 100%;
float: none;
clear: both;
}
/************************************************************************************
HEADER
*************************************************************************************/
/* reset absolute elements to static */
#header .social-widget, #site-logo, #site-description, #main-nav {
position: static !important;
float: none;
clear: both;
}
/* header */
#header {
height: auto !important;
padding-top: 10px;
}
/* social widget */
#header .social-widget {
padding: 5px 0 20px;
}
/* search form */
#header #searchform {
position: absolute;
top: 0;
left: inherit;
right: 0;
width: 150px;
}
#header #searchform #s {
float: right;
width: 85px;
}
#header #searchform input#s:focus {
width: 150px;
}
/* site logo */
#site-logo {
padding-right: 100px;
margin: 0 0 10px;
}
#site-logo a {
font-size: 30px;
}
/* site description */
#site-description {
margin: 0 0 10px;
}
/************************************************************************************
MAIN NAV
*************************************************************************************/
#main-nav {
height: auto;
margin: 10px 0;
}
#main-nav a {
padding-bottom: 10px;
}
/************************************************************************************
HOME HIGHLIGHTS
*************************************************************************************/
.home-highlights .home-highlights-content {
overflow: visible;
}
/************************************************************************************
FOOTER
*************************************************************************************/
.footer-nav {
padding-right: 200px;
}
.footer-nav li {
margin: 0 8px 5px 0;
}
}
@media screen and (max-width: 600px) {
/************************************************************************************
LAYOUTS
*************************************************************************************/
/* reset all post layouts to fullwidth */
.grid4 .post,
.sidebar1 .grid4 .post,
.grid3 .post,
.sidebar1 .grid3 .post,
.grid2 .post,
.sidebar1 .grid2 .post,
.grid2-thumb .post,
.sidebar1 .grid2-thumb .post
{
width: 100%;
margin-left: 0;
float: none;
}
}
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */
html {
-webkit-text-size-adjust: none;
}
/************************************************************************************
GRID
*************************************************************************************/
.col4-1,
.col4-2, .col2-1,
.col4-3,
.col3-1,
.col3-2 {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/************************************************************************************
HEADER
*************************************************************************************/
/* site description */
#site-description {
text-align: left;
margin: 0 0 10px;
}
/************************************************************************************
MOBILE NAV BUTTON
*************************************************************************************/
.mobile-button {
position: relative;
width: 32px;
height: 30px;
margin-bottom: 3px;
margin-right: 3px;
display: block;
float: right;
cursor: pointer;
}
.mobile-button:after {
border: solid 1px #7a7a7a;
padding: 1px;
content: "";
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
background-color: #c3c3c3;
background-image: -moz-linear-gradient(top, #d8d8d8 0%, #999898 100%);
background-image: -webkit-linear-gradient(top, #d8d8d8 0%,#999898 100%);
background-image: linear-gradient(top, #d8d8d8 0%,#999898 100%);
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/************************************************************************************
MAIN NAV (MOBILE)
*************************************************************************************/
#main-nav-wrap {
position: absolute;
top: 20px;
right: 0;
z-index: 1000;
}
/* menu icon */
#menu-icon {
background: url(images/menu-icon.png) no-repeat center center;
}
/* main nav */
#main-nav {
clear: both;
position: static;
width: 160px;
z-index: 1000;
padding: 10px 5px;
background: #fff !important;
border: solid 1px #999 !important;
display: none; /* visibility will be toggled with jquery */
-webkit-box-shadow: 1px 2px 0 rgba(0,0,0,.2);
-moz-box-shadow: 1px 2px 0 rgba(0,0,0,.2);
box-shadow: 1px 2px 0 rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#main-nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px !important;
padding: 0 !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
#main-nav a,
#main-nav ul a {
font: inherit !important;
text-transform: inherit !important;
background: none !important;
width: auto !important;
display: inline !important;
padding: 0 !important;
color: #666 !important;
border: none !important;
text-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
#main-nav a:hover,
#main-nav ul a:hover {
background: none !important;
color: #000 !important;
}
/* dropdown */
#main-nav ul {
position: static;
display: block;
margin: 0;
padding: 0;
background: none;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/************************************************************************************
SLIDER
*************************************************************************************/
#slider img {
max-width: 97%;
}
.slide-excerpt {
display: none;
}
.slides .slide-post-title {
font-size: 100%;
}
/************************************************************************************
SOCIAL WIDGET
*************************************************************************************/
/* social widget */
.social-widget {
position: static !important;
margin: 10px 0;
padding: 0;
float: none;
}
/* searchform */
#searchform {
position: static;
margin: 10px 0;
padding: 0;
float: none !important;
}
#searchform #s {
float: none !important;
}
/************************************************************************************
POST
*************************************************************************************/
/* post title */
.post-title {
margin: 0 0 2px !important;
padding-top: 4px;
font-size: 2em !important;
}
/************************************************************************************
POST NAV
*************************************************************************************/
.post-nav .prev, .post-nav .next {
display: block;
width: 100%;
clear: both;
margin-bottom: 10px;
}
/************************************************************************************
COMMENTS
*************************************************************************************/
.commentlist {
padding-left: 0;
}
.commentlist .commententry {
overflow: visible;
}
.commentlist .avatar {
float: left;
width: 40px;
height: 40px;
margin: 0 10px 10px 0;
}
/************************************************************************************
FOOTER
*************************************************************************************/
#footer-logo {
position: static !important;
}
.footer-nav {
padding: 0;
}
}
@media screen and (min-width: 481px) {
/* ensure #nav and #searchform is visible on desktop version */
#main-nav,
#headerwrap #searchform {
display: block !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment