Home › Forums › Support › Sider: Using '.alignfull' for images in Gutenberg – 'header/sider' overlaps.
- This topic has 4 replies, 2 voices, and was last updated 3 years ago by
Tom.
-
AuthorPosts
-
January 7, 2020 at 2:23 pm #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?
January 7, 2020 at 2:29 pm #1125088Dwayne
.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.
January 7, 2020 at 4:19 pm #1125160Tom
Lead DeveloperLead DeveloperThat 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 7, 2020 at 5:45 pm #1125196Dwayne
@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.January 8, 2020 at 9:09 am #1125909Tom
Lead DeveloperLead DeveloperGlad it’s working, I’ll get it added to the site 🙂
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.