Skip to content

Instantly share code, notes, and snippets.

@jeffsebring
Created April 1, 2012 05:43
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save jeffsebring/2271757 to your computer and use it in GitHub Desktop.
Save jeffsebring/2271757 to your computer and use it in GitHub Desktop.
Responsive WordPress Core Theme Styles
/**
* Responsive WordPress Core Theme Styles
* http://jeffsebring.com/responsive-wordpress-images/
--------------------------------------------------- */
.sticky,
.bypostauthor,
.gallery-caption {
display: normal;
}
.alignnone {
margin: 1em 1em 1em 0;
}
.aligncenter,
div.aligncenter {
display:block;
margin: .5em auto;
}
.alignright {
float:right;
margin: 0 0 1em 1em;
}
.alignleft {
float:left;
margin: 0 1em 1em 0;
}
.aligncenter {
display: block;
margin: 1em auto;
}
img,
img[class*="align"],
img[class*="wp-image-"] {
max-width: 100%;
height: auto;
}
img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
img.alignright {
margin-left: 1em 0 1em 1em;
}
img.alignleft {
margin: 1em 1em 1em 0;
}
img.aligncenter{
display: block;
margin: 1em auto;
}
img#wpstats {
display: block;
margin: 0 auto;
}
img[class*="align"],
img[class*="wp-image-"],
.gallery .gallery-icon img {
border: none;
}
.wp-caption {
margin-bottom: 1em;
margin-left: 0;
max-width: 96%;
text-align: center;
}
.wp-caption img {
display: block;
margin: 0 auto;
}
.wp-caption-text {
position: relative;
font-size: .8em;
}
.gallery {
margin: 0 auto;
}
.gallery .gallery-item {
margin: 0;
float: left;
text-align: center;
width: 33%;
}
.gallery a img {
border: none;
}
.gallery-columns-4 .gallery-item {
width: 25%;
}
.gallery-columns-4 .gallery-item img {
width: 100%;
height: auto;
}
.comments ol {
padding-left: 0;
}
.comments ol li {
margin: 0;
}
.comment-author {
padding: 0;
text-decoration: none;
}
@media only screen and (max-width: 800px) {
embed,
object {
max-width: 100%;
}
}
@media only screen and ( max-width: 650px ) {
.gallery-columns-3 .gallery-item {
width: 33.33%;
}
.gallery-columns-3 .gallery-item img {
width: 100%;
height: auto;
}
}
@media only screen and (max-width: 480px) {
.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment