0
Welcome Guest! Login
0 items Join Now

SOLVED Gutenberg - Full width issue

    • Bridget's Avatar
    • Bridget
    • Rocketeer
    • Posts: 98
    • Thanks: 4

    SOLVED Gutenberg - Full width issue

    Posted 9 months 2 weeks ago
    • I have the latest version of Helium, Gantry plugin and wordpress but I noticed something missing when editing using Gutenberg.

      The wide width & Full width options are not available when I select the helium theme. It's available on the twenty twenty theme for Wordpress. I read somewhere that the theme developer has to allow this.

      Below is an image link so you can see what is suppose to be there but it's not for Gantry/Helium

      tinyurl.com/yx7lpj2b

      Thanks!
    • Last Edit: 9 months 2 weeks ago by Bridget.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91278
    • Thanks: 11947
    • Web Designer/Developer

    Re: SOLVED Gutenberg - Full width issue

    Posted 9 months 2 weeks ago
    • It's not in any Gantry 5 template as far as I can tell. I don't think it's supposed to be - but I will check...

      Layout is controlled on the Gantry 5 admin > layout for the section settings not invidual posts/pages.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Bridget's Avatar
    • Bridget
    • Rocketeer
    • Posts: 98
    • Thanks: 4

    Re: SOLVED Gutenberg - Full width issue

    Posted 9 months 2 weeks ago
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91278
    • Thanks: 11947
    • Web Designer/Developer

    Re: SOLVED Gutenberg - Full width issue

    Posted 9 months 1 week ago
    • Our themes (including Helium) are not going to support this by default.

      1. Not everyone uses Gutenberg
      2. There is really no need to be using Gutenberg since it's effectively duplicating the functionality that Gantry 5 already provides (e.g. columns, image placement etc etc).
      3. Even if you add the functions in, they may not works as you intend since the Gantry 5 html structure is quite different to most themes and you also have to consider the responsive nature of the template too. Undoubtedly additional custom CSS would be required to make this functionality work which would be specific to the theme and the layout of your content.

      But if you still want to add it yourself see https://weblines.com.au/gutenberg-blocks-wide-alignment-full-width/ - I have tried it and it does add the functionality.

      Please also remember that functions.php will be overwritten again by any template update (losing your changes).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Bridget's Avatar
    • Bridget
    • Rocketeer
    • Posts: 98
    • Thanks: 4

    Re: SOLVED Gutenberg - Full width issue

    Posted 9 months 1 week ago
    • Thanks for the response. It was very helpful. The only point I would disagree with is #2 (Gutenberg duplicates Gantry 5). Unless I'm missing something I can't from the page or post level drag and drop various functions only on a template level. But thanks again for the link as that will do the trick. Appreciate your help.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 91278
    • Thanks: 11947
    • Web Designer/Developer

    Re: SOLVED Gutenberg - Full width issue

    Posted 9 months 1 week ago
    • Yes, it's template level but you can assign a template to a post/page and therefore do the same sort of thing.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Bridget's Avatar
    • Bridget
    • Rocketeer
    • Posts: 98
    • Thanks: 4

    Re: SOLVED Gutenberg - Full width issue

    Posted 8 months 3 days ago
    • Adding this info for anyone else who has issues:

      WHile the code above does work the issues arise when you are putting content inside the container (ie. text). It forces itself all the way to edge and does match alignment for non full width containers. So I had to do this:

      Use full width on groups or in my guess ghostkit grids (highlight recommended plugin for gutenberg). Full width selection needs be the first wrapping block containing anything.

      Below inclues all the css I used PLUS having to add some extra code to functions as noted in the thread above.

      .g-container {
      width: inherit;padding-left: 10%; padding-right: 10%}
      .alignfull {
      padding-left: 16%;padding-right: 16%}


      .entry-content .alignwide {
      margin-left: -80px;
      margin-right: -80px;
      }
      .entry-content .alignfull {
      margin-left: calc( -100vw / 2 + 100% / 2 );
      margin-right: calc( -100vw / 2 + 100% / 2 );
      }
      .alignfull img {
      width: 100vw;
      }

      .alignfull .alignleft img {
      width: inherit
      }

      Note: needed to add the img width: inherit because on my non background images would scale too big with responsive. You can't jsut add it to aligfull img because then your background images would be an issue. Had to some sort of extra class within the containter that selected the image I dont want to oversize.

      I'm sure there are better ways to do this but this is how I had to deal with it using gantry and gutenberg together. Great combo but some little issues along the way.

Time to create page: 0.103 seconds