Full width background, contained boxes

  • Resolved ddmccaleb

    (@ddmccaleb)


    2 years, 10 months ago

    I am uncertain whether this is a Neve theme or an Otter issue, so please point me in the right direction but give it serious consideration as I believe it may be an Otter issue. I am using Neve them and Otter blocks. I have tried every conceivable combination of wide width, full width, regular width, and page template and cannot figure out how to do this: Full width background with contained content blocks. If you take a look at https://esvamarket.com/vendors/ the top block is full width, but the block really isn’t contained. Rather, it is simply a short heading centered on the page. Scroll down to the Vendor Eligibility section and I’d like the yellow background to stretch the full width. I can do that by selecting Wide Width alignment, but then the wording is no longer contained despite the fact that the default page template is “default template” which is contained and the Neve options are “contained”. Any suggestions? Thank you!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Contributor soarerobertdaniel7

    (@soarerobertdaniel7)

    Hi,

    To do a full-width section that can keep the element contained, you must use two Section Blocks. One section will serve as a background, and the other will have the content.
    The steps are:
    1. Insert a Section block. Press Skip when it asks about the layout (in this way, we will have a single column).
    2. Set the section’s width to Full Width in toolbar controls.
    3. Inside the column, insert another Section Block. Go to Inspector > Section Structure and select the Maximum Content Width using the slider. (Beware that there is a minor bug with the slider that does not allow you to reach the end. This will be solved in the next release.)

    You will have to adjust the Maximum Content Width to fit your page flow.
    You can see here how it looks: https://satisfyingbell.tastewp.com/2022/01/17/full-width/
    Here is the example snippet: https://gist.github.com/Soare-Robert-Daniel/2488ff2074c0904f76c1f287242b9ddb ; you can copy this and insert it in a separate Paragraph block to see if this solution fits your needs.

    Have a great day!

Viewing 1 replies (of 1 total)
  • The topic ‘Full width background, contained boxes’ is closed to new replies.