Full Width Author Box

Hi there,

is it possible to see the site so i can understand the layout - as there are several ways of achieving the full width content.

For styling images - particularly if its going to be responsive will require some CSS.
But if we can see the site i can advise on that as well.

Hey David,
ok sure, you can check out the layout here: https://nutriciously.com/berry-chia-jam/

Thanks, Lars

Hi Lars,

That section is built with Elementor so it's something you will need to check with their support team.

Thanks for your understanding!

Hi Leo,

Sure, but like mentioned in my intro post, I'm currently in the process of recreating that Elementor Template with GP + GenerateBlocks.

Thanks, Lars

That case can you link me to a site where GB is used?

Alright, let me explain in greater detail.
I'm currently using that Elementor template for all my blog posts and want to get away from it. Therefore, I'm currently building Gutenberg blocks with GenerateBlocks that so far, are only applied to a post that's in draft.

As soon as I'm happy with the result, I'll turn off Elementor and apply the new Gutenberg blocks to all blog posts. So at the moment, I'm not able to send you a live URL where GB is used.

I was just wondering how to create an author section similar to the one I currently have set up with Elementor.

Key questions are: Is there a way to stretch a section over the full width of the browser even though it's technically stuck in a container? No matter what settings I choose when editing the block for my new author section, it always ends up contained within the parent container width.

And then there's the author image which should have a box-shadow applied and be squared on desktop but circular on mobile. Is there an easy way to do this with native Gutenberg or the GenerateBlocks or will I have to write custom CSS for such a functionality?

If you're using a GenerateBlocks Container Block, select the Container and from its Toolbar ( not the sidebar ) there is Full Width option. This will use CSS to stretch the image the width of the screen.

Hmm, now I've set the toolbar option to full width as well as everything under the layout section of the container to full width but it's still stuck in the container. I've selected "after_content" as the location for the entire block. Does that seem right?

Otherwise, would you be willing to take a peek into the backend of my site?

There's also one more issue: Seems like the sticky navigation also gets restrained by the container width that I just intended for the width of my blog post content. Is there a setting to have the sticky navigation go full width just like the regular navigation?

Might need to take a different approach - the issue though is the Comments Form. We need to unhook this and hook it in before the Footer - Tom provides the a PHP Snippet to do that here:

https://generatepress.com/forums/topic/move-comments-section-before-the-footer/#post-1663535

Once thats moved you can use the Block Element > Hook: before_footer to place the Author box full width.

If I use the code provided by Tom and set the author box to "before_footer", my comments actually turn full-width and the author box goes below the comments.

In any case, I set up an author box that's not full-width which I'm ok with for now.

I have another question though regarding the GP layout options, more specifically the content separator. Can I ask this here or should I rather open a new thread?

Thats correct - we can provide some CSS to make the comments form contained. And to add your block elements before it, edit the element and below where you selected the hook you can can set its Priority - changing this to less than 10 will put it before the repositioned comments....

but if you're happy with how it is then - yes please - if you can raise a new topic

Yay, thanks so much David, that worked really well. And I seem to have found a way to make the comments contained again, using the code

.comments-area {
max-width: 760px;
margin: auto; }

Would you have done it this way as well?

My other question concerns the spacing around the featured image of blog posts. When inspecting the CSS, it's currently set to 2 em. How do I make this smaller?

Adjusting the content separator setting to a smaller value doesn't change anything for me.

Yep - thats the CSS i would have used for the Comments containment :)

Is it possible to see the Dev site ?

Ok, sure, here is a sample URL: https://wordpress-580261-1929636.cloudwaysapps.com/kidney-bean-burgers/
The content separator is set to 1 em.