[Resolved] Sider: Using '.alignfull' for images in Gutenberg – 'header/sider' overlaps.

Home Forums Support Sider: Using '.alignfull' for images in Gutenberg – 'header/sider' overlaps.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1125079
    Dwayne
    .no-sidebar .entry-content .alignfull {
        margin-left: calc(-100vw/2 + 100%/2);
        margin-right: calc(-100vw/2 + 100%/2);
        max-width: 100vw;
        width: auto;
    }

    I presume that’s the CSS that is the issue. It’s auto-added by WP/Gutenberg. It’s calculating viewport based on whole window, but part of the window is obscured by the ‘sider/header’. And as far as WP is concerned, there’s no sidebar in this instance.

    Is there a fix that would let me use the ‘alignfull’ option but keep it to the main section and not go behind the sidebar?

    #1125088
    Dwayne
    .no-sidebar .entry-content .alignfull {
        margin-left: calc(-100vw/2 + 100%/2 + 100px);
        margin-right: calc(-100vw/2 + 100%/2 + 150px);
        max-width: 100vw;
        width: auto;
    }

    seems hacky to add px. not sure if fixing.

    #1125160
    Tom
    Lead Developer
    Lead Developer

    That looks like a good solution, as the header is taking up 250px of the width. You might want to use 125px on either side, though.

    Also, make sure your CSS is within a media query so it doesn’t apply when the sidebar header disappears.

    #1125196
    Dwayne
    @media (min-width: 1000px) {
    	body {
    		padding: 0 50px 0px;
    		margin-left: 250px;
    	}
    
    	.site-header {
    		position: fixed;
    		left: 0;
    		top: 0;
    		width: 250px;
    		z-index: 300;
    		height: 100%;
    		overflow: auto;
    		overflow-x: hidden;
    		-webkit-backface-visibility: hidden;
    		-webkit-overflow-scrolling: touch;
    		transition: .1s ease;
    
    	}
    
    .no-sidebar .entry-content .alignfull {
        margin-left: calc(-100vw/2 + 100%/2 + 125px);
        margin-right: calc(-100vw/2 + 100%/2 + 125px);
        max-width: 100vw;
        width: auto;
    }
    
    }

    Yes. Thanks!
    This should prob be added to the core css for the SIDER site.
    Code attached for anyone searching for the solution. May need to adjust slightly to address padding etc.

    #1125909
    Tom
    Lead Developer
    Lead Developer

    Glad it’s working, I’ll get it added to the site 🙂

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.