WordPress has a few default classes used for things like image alignment, galleries and other html output by core features. This is a combination of the styles found in the default WordPress TwentyEleven theme, and some modifications of my own. Include this snippet with your css to save a bunch of time building your responsive WordPress theme.
I’ll continue to update this Gist as needed for my own use. Feel free to fork it.
[css]
<pre>/**
* 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;
}
}</pre>
[/css]Revisions
- December 11, 2012 @ 12:02:55 [Current Revision] by PeterLugg
- December 11, 2012 @ 12:02:35 by PeterLugg
Revision Differences
There are no differences between the December 11, 2012 @ 12:02:35 revision and the current revision. (Maybe only post meta information was changed.)
No comments yet.