css - Adding caption to side-by-side photos in Wordpress shifts one photo to left margin -
In order to get in favor of two images in Wordpress (2014 theme), I want to clear a div after images And it works:
& lt; A href = "/ image1.jpg" & gt; & Lt; Img align = "alignleft" src = "/ image1.jpg" alt = "" width = "225" height = "400" /> gt; & Lt; / A & gt; & Lt; A href = "/ image2.jpg" & gt; & Lt; Img align = "alignright" src = "/ image2.jpg" alt = "width =" 225 "height =" 400 "/> gt; & Lt; / A & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt;
But if I add a caption to the pictures, the image on the left goes beyond the left entry, which is more than the specified entry-content diva.
[caption id = "" align = "alignleft" width = "302"] & lt; A href = "/ image1.jpg" & gt; & Lt; IMG src = "/ image1.jpg" alt = "width =" 225 "height =" 400 "/> gt; & Lt; / A & gt; Caption here [/ caption] [caption id = "align =" algerette "width =" 302 "] & lt; A href = "/ image2.jpg" & gt; & Lt; Img src = "/ image2.jpg" alt = "" width = "225" height = "400" /> gt; & Lt; / A & gt; Captions here [/ caption] & lt; Div class = "clear" & gt; & Lt; / Div & gt;
CSS:
img.alignleft {float: left; Margin-right: 12px; } Img.alignright {float: right; Margin-left: 12px; } Img.aligncenter {Display: Block; Margin-left: auto; Margin-right: auto; } An img.alignright {float: right; Margin-left: 12px; } An img.alignleft {float: left; Margin-right: 12px; } An img.aligncenter {display: block; Margin-left: auto; Margin-right: auto; }. Clear {clear: both; }
Do you need to adjust?
But the problem is that there is two rules within a media-query, Serial starts with 3462:
/ * line 3492 * /. Full-width .site-content .wp-caption.alignleft {margin-left: -168px; } / * Line 3504 * /. Full-width .site-content Wp-caption.alignright {margin-right: -168px; }
This rule can be easily written in such a way:
.full-width .site-content .wp-caption.alignleft , .full-method.site-content. Wp-caption.alignright {margin: 0; }
Comments
Post a Comment