[Support request] Slideout: Adjust "Full width"-Section to design margins

[Tim]

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?

[David]

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;
}

[Tim]

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/ )

[David]

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.

[Tim]

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

[David]

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.

[Tim]

I’ve now put one to align wide and the other (Second) to alignfull so you can see both versions

[David]

You need to deselect the Alignwide and the ALignfull options as neither of them are required.

[Tim]

Okay, I’ve deselected them at the first “section” https://kontemplaktion.de/masseinheit-glueck/

[Tim]

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

[David]

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.

[Tim]

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?

[David]

The simplest thing would be to increase the Customizer > Layout > Container –> Padding. You can set it separately for desktop and mobile.

[Tim]

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?

[David]

Really tricky – i notice your content has an additional wrapper wtr-content ?
Which is adding to the layers of controlling the elements individual widths.

[Author]

Posts