Archived topic
Sider: Using '.alignfull' for images in Gutenberg - 'header/sider' overlaps.
4 replies · Started by Dwayne on January 7, 2020
.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?
.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.
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.
@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.
Glad it's working, I'll get it added to the site :)
Thanks!
