[Resolved] Gp Blocks Shape Divider

[Ian]

So, with my latest build, I am trying to use GP Blocks as much as possible. Is there an easy way to create a bottom shape divider besides loading in an image to make this happen?

[Ian]

This may be related so I am adding notes here. I am now using Co Blocks to add a shape divider into a new GP Block Container. This is doing it’s job for adding a row shape divider. However, after adding a row shape, the browser now has a horizontal scrollbar. Looks like something is pushing it wider than the browser container. Had to add this css to fix the problem:

.no-sidebar .entry-content .alignfull {
margin-left: 0 !important;
margin-right: 0 !important;
}

Any ideas if there is a better way to handle this? I have added the test site URL in the original post.

[Tom]

You should just be able to set that block not to be align-full (should be an alignment option in their block toolbar).

We’ll be adding shape dividers to the pro version, but you can also just add SVG html/images to a Container block.

[Ian]

Right now, I am adding a shape divider in a container below the main container, then -‘ve margining it up. Not sure if this is the best way.

As for align-full issue, are you referring to the container that has the Co-Blocks shape divider? I am using a GB Container at full width with full width Inner Container so I can stretch the shape divider full width. Have tried changing Wide Width and Full Width in the container itself and issue still happens. In fact, Wide Width increases the scrolling. Any more tips?

btw, where can we add SVG code to a Container? Can’t seem to locate it.

[Tom]

The align-full option in the block toolbar can create horizontal scroll.

If you’re wanting to build full-width sections, we suggest using the full-width option built into GP: https://docs.generatepress.com/article/page-builder-container/

Otherwise, you can try this CSS:

body, html {
    overflow-x: hidden;
}

The way you’re doing the dividers right now looks good. You can just use the HTML block to add the SVG code, or use an image block.

[Ian]

Thanks Tom! Yes, I am using Element to control full width of Pages. Odd how the horizontal scrollbar is happening with containers and some blocks from what I can see.

Thanks for the CSS, it works. This looks like it just cuts off the edges that are overflowing. Based on my CSS above, is this enough of a clue to make things so there is no overflow at all? Want to try and keep things more tidy as GP is so clean and efficient.

I have left the scrollbar just in case you want to go back in to investigate. Let me know what else I can change as well, it may be the way I am laying things up as well.

Thanks!

[Tom]

If you remove the align-full option from all of your blocks, the horizontal scroll should go away.

I’m not seeing any horizontal scroll on the site right now. Should I be looking at a specific page?

[Ian]

Interesting. I am using Chrome and Edge and they both exhibit the horizontal scroll issue.

I may not be understanding Gutenberg but where is the align-full option? When I select a GP Block Container, I see there is a drop down menu with Wide Width and Full Width. It’s also a little confusing that you can enable or disable each with click which is not how a traditional drop down menu would work. Drop down menu’s typical allow you to choose one or the other. Right now, it looks like we can choose to enable to disable either drop down menu item? Looks like disabling it gives a smaller scroll bar but it’s still there.

I have tested using HTML and CSS to add a shape divider manually and that does not cause the scroll bar. I wonder if this is just an issue when using GP Block Container + a Scroll bar block? Not sure if this is related but when I add a pre-designed block from Stackable inside a GP Block container, the same issue occurs.

Check the home page, there are 2 containers at the top, both with bottom shape dividers that cause this issue for me. By the way, when I remove the shape divider block, the issue goes away.

[Ian]

Hey Tom,

I have done more research and this looks like some sort of a WordPress issue. Why would this not be corrected after so many months and so many reports of this happening. In any case, want to come back to thank you for the solution. Looks like there might be a new Sections block that can deal with this hacky method. Will await its arrival.

Thanks, marking this topic as resolved.

[Tom]

The align-wide and align-full options can be useful, but align-full usually requires some hacky CSS which can result in horizontal scroll when a scrollbar is present.

Instead of using those options to produce full width containers, you should use this option: https://docs.generatepress.com/article/page-builder-container/

[Ian]

Thanks Tom. I am indeed using Elements to control full width of pages. This horizontal issue seems to be only happening when I insert a shape divider using a Gutenberg block. It’s not happening when I add a shape using SVG HTML and CSS. Not sure if that helps.

Thanks again!

[Tom]

That’s because the CoBlocks block you’re using is set to align-full. If you un-set that option, the scroll will go away.

[Ian]

Hey Tom, I would like to try this to stay in tune with the GP way, clean and efficient coding! Do you have a tip on how I can do that?

[Tom]

I think what you’re doing is good, you just need to make sure your CoBlocks blocks aren’t using the align-full option.

[Ian]

omg Tom! After reading your comment, I went and selected “Wide Width” and this got rid of the darn horizontal scroll bar! To be honest, I am still not 100% sure how the Full Width and Wide Width buttons work in Gutenberg. Looks like you can select / de-select each independently which is not how I would build this interface. Crazy but fixed!!!

Thanks again my man!

[Author]

Posts