How to make WordPress content images responsive in a custom responsive theme
I’m going to show you an easy trick to make the images we add through wordpress admin, responsive, without manually adding a style for them, if you are using a custom theme or building a custom responsive theme.
Just add these styles to you theme’s style.css file and you are good to go.
float: left;
}
.alignright {
float: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
blockquote.alignleft,
img.alignleft {
margin: 7px 24px 7px 0;
}
.wp-caption.alignleft {
margin: 7px 14px 7px 0;
}
blockquote.alignright,
img.alignright {
margin: 7px 0 7px 24px;
}
.wp-caption.alignright {
margin: 7px 0 7px 14px;
}
blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
margin-top: 7px;
margin-bottom: 7px;
}
.site-content blockquote.alignleft,
.site-content blockquote.alignright {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 17px;
width: 50%;
}
.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {
margin-bottom: 17px;
}
.wp-caption {
margin-bottom: 24px;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0;
}
/*responsiveness */
.comment-content img,
.entry-content img,
.entry-summary img,
#site-header img,
.widget img,
.wp-caption {
max-width: 100%;
}
