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

[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?

[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.

[Tom]

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.

[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.

[Tom]

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

Thanks!

[Author]

Posts