WordPress.org

Forums

Fourteen Extended
[resolved] Primary Sidebar to Right causes content overlaps (5 posts)

  1. JoshTT35
    Member
    Posted 1 year ago #

    Just doing some local testing... Using the Extended plugin options to float primary sidebar to the right has some odd consequences that are probably due to the "responsive" functions not expecting a right-positioned primary sidebar (I realize this function of the plugin is a work in progress).

    1) If Secondary sidebar is present, it causes overlap of the post content (text and also post title background block) and secondary sidebar text content while shrinking the browser window to test responsive functions.

    2) If Secondary sidebar is NOT present, any right-floated images within the post content sit way too far to the right (relative to the post text). If the window is being resized smaller, the black Primary sidebar will increasingly overlap the images until the responsive settings move the sidebar below the post. The text content of the post does not appear to be affected by this except in the #1 case above when the second sidebar is present.

    In case #2, it appears that the image margins are treated just as if the black primary sidebar was never there and are based only on the right-hand edge of the page.

    https://wordpress.org/plugins/fourteen-extended/

  2. JoshTT35
    Member
    Posted 1 year ago #

    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

  3. Zulfikar Nore
    Member
    Plugin Author

    Posted 1 year ago #

    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

  4. JoshTT35
    Member
    Posted 1 year ago #

    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.

  5. JoshTT35
    Member
    Posted 1 year ago #

    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;
    }}

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic