Let me add a correction. If the secondary sidebar is not active, the right-floated images within a post are NOT stopped by the right side of the page. In a more extreme case, if I widen the post content using a child theme/stylesheet, right-floating images will hang off the page (even if Primary sidebar is in the default left-hand position). The images will jump into proper position (aligned with text) only after significantly shrinking the window (to about 790px wide).
So the right-floated image problem seems to be caused by the theme itself, which may make it more difficult to get the responsive functionality of a right-floated primary sidebar to work well.
Example of images hanging-off the page after text widened for anyone curious: Screenshot
So the right-floated image problem seems to be caused by the theme itself, which may make it more difficult to get the responsive functionality of a right-floated primary sidebar to work well.
That is correct – styling of those images is done by wrapping them in pullquotes format as seen in style.css @line 3487 with code:
.full-width .site-content blockquote.alignleft,
.full-width .site-content img.size-full.alignleft,
.full-width .site-content img.size-large.alignleft,
.full-width .site-content img.size-medium.alignleft,
.full-width .site-content .wp-caption.alignleft {
margin-left: -168px;
}
and @line 3499 with code:
.full-width .site-content blockquote.alignright,
.full-width .site-content img.size-full.alignright,
.full-width .site-content img.size-large.alignright,
.full-width .site-content img.size-medium.alignright,
.full-width .site-content .wp-caption.alignright {
margin-right: -168px;
}
The advise given is to reduce those figures to a more sane -48px or there about and adjusted up or down depending on the width settings.
Hope that helps.
Regards,
Zulf
I’ll play with it and see where it takes me. In the meantime I’m sticking with the left bar, though my preference is for the right.
Thanks for the suggestion. It may be a while, so I’ll go ahead and mark this as resolved.
Josh T.
Update: At least in regard to the right-floated primary sidebar, the following CSS added to a child theme may do the trick for some to prevent overlap of the post content, though there may still be issues if a secondary sidebar is enabled. This at least takes care of the overlap that occurs when the primary sidebar narrows slightly, but before it switches locations (during browser resize to smaller window).
/* RESIZE FOR RIGHT-FLOATED PRIMARY SIDEBAR */
@media screen and (min-width: 1008px) and (max-width: 1079px {
#content.site-content article {
margin-right:182px;
}}