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

Home Forums Support Slideout: Adjust "Full width"-Section to design margins

  • This topic has 14 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1068159
    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?

    #1068321
    David
    Staff
    Customer Support

    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;
    }
    #1068719
    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/ )

    #1068736
    David
    Staff
    Customer Support

    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.

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

    #1068771
    David
    Staff
    Customer Support

    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.

    #1068813
    Tim

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

    #1068881
    David
    Staff
    Customer Support

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

    #1069822
    Tim

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

    #1069826
    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

    What I want to express

    #1070312
    David
    Staff
    Customer Support

    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.

    #1070369
    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?

    #1070397
    David
    Staff
    Customer Support

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

    #1070976
    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?

    #1071110
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.