Archived topic
Slideout: Adjust "Full width"-Section to design margins
14 replies · Started by Tim on November 20, 2019
Hey,
thanks again for your great theme & the great and quick support, too!
Now I have a different problem:
I'm using the slide out template an am just doing some general styling, trying to add a block to Gutenberg, which allows me to separate a section by color etc.. So, if a user scrolls, he can find the beginning of the next section quickly. For this, I want to break out the common layout with strict margins. But if i choose "full width", it does not align for the whitespace ("canvas") only, but for the full screen (including the gray "off-canvas").
How do I get "full width" to be full width according to the layout (the white content space)
I tried it with following code, but it didn't help:
`.fullwidth-container {
margin-left: calc(-100vw / 2 + 765px / 2);
margin-right: calc(-100vw / 2 + 765px / 2);
padding: 40px;
box-sizing: boder-box;
background-color: #ccc;
}
Can you help me?
Hi there,
this type of CSS hack can be problematic with different browsers but in theory this should work by considering the width if the 'sidebar' in its calculations:
.fullwidth-container {
margin-left: calc((-100vw + 60px)/2 + 100%/2);
margin-right: calc((-100vw + 60px)/2 + 100%/2);
max-width: 100vw;
width: auto;
}Thanks for the reply, but it does not work with safari or chrome.
Any other ideas? (You can see it half way down on this site: https://kontemplaktion.de/masseinheit-glueck/ )
Can you create a container with the class and CSS provided above so i can take a look - currently i only see the gutenberg block CSS being a applied.
I‘m not sure what you mean by „can you create a container with the class“ – so I‘ve added the class .fullwidth-container to the Group-Blocks I want to use as Seperators. Or am I mistaking/misunderstanding what you want?!
Ok you still have the AlignWide option on the Group Block - can you disable that.
Then your CSS class you have .fullwidth-container it needs to be fullwidth-container ie without the full stop - then i can take another look.
I've now put one to align wide and the other (Second) to alignfull so you can see both versions
You need to deselect the Alignwide and the ALignfull options as neither of them are required.
Okay, I've deselected them at the first "section" https://kontemplaktion.de/masseinheit-glueck/
And just to make sure (my english is very mediocre an non-tech), I've made a little graphic, what I want to achieve as result:
https://drive.google.com/file/d/1bBlhUh9VPG90LI3RbrjmAkALBLvoyAaf/view?usp=sharing
Aah my apologies you actually want the AlignWide function so the block spans the width of the White Container.
OK - so the issue is this Customizer > Additional CSS:
.no-sidebar .inside-article>*, .no-sidebar #comments, .no-sidebar .nav-links {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}If you remove this CSS then normal alignwide option in the block editor will work.
You do not need the fullwidth-container css we have added.
Thank you – this already is a step in the right direction. Is there any possibility, that the text will be displayed back in the old, narrow way and just the "section" breaks it?
The simplest thing would be to increase the Customizer > Layout > Container --> Padding. You can set it separately for desktop and mobile.
Thank you, that's pretty close to perfect. It just moves the "section" as well as the complete inside. Isn't there a workaround, which allows to keep the AlignWide completely filling the white container and the rest in "normal" width?
Really tricky - i notice your content has an additional wrapper wtr-content ?
Which is adding to the layers of controlling the elements individual widths.
