[Resolved] full width block

Home Forums Support [Resolved] full width block

Home Forums Support full width block

  • This topic has 11 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1128050
    Daniele

    Hi,
    I’m trying to build a layout similar to this for my homepage -> https://www.rektmag.net/

    but I cannot go fullwidth for my wpshowpost element..I’m forced to stay into the container

    How can I go fullwidth only with this element?

    #1128063
    Leo
    Staff
    Customer Support

    Hi there,

    You can try using the full width page builder container:
    https://docs.generatepress.com/article/page-builder-container/

    #1130287
    Daniele

    Hi,
    but is possibile to “break the grid” only with an element? I would like to have only an element full width, and the rest of the page normal

    #1130437
    David
    Staff
    Customer Support

    Hi there,

    it is possible to break out the container using some rather hackish CSS which is what Gutenberg Block editor does when you select Full Width on a supported block.

    Personally i would set the page to full width as per Leo’s advice.
    Content you wish to keep contained add to a Group Block – this will use the Container settings from the customizer.

    #1130478
    Daniele

    Thanks David

    #1130679
    David
    Staff
    Customer Support
    #1839134
    Sjoerd

    For future reference, this might be interesting to use as well:
    https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes

    I have actually used it for a full width container block element while using a sidebar as well.

    .alignfull.full-width-fb {
    	width: 100vw !important;
    	max-width: 100vw !important;
    	margin-left: calc(50% - 50vw) !important;
    }
    
    @media screen and (min-width: 900px) {
    	.alignfull.full-width-fb {
    		width: auto !important;
    		margin-left: calc(50% / .64 - 50vw) !important;
    		margin-right: -50vw !important;
    	}
    }

    Quick explanation of setting up the container block:

    1. Add a container block to your layout and set it to full width
    2. I have assigned the self-chose class .full-width-fb to my main container to make sure the css only changes the behavior of my chosen full width containers
    3. Main container is set to full width + contained with on the inner (you can choose whatever want on the inner container of course)
    4. Main container has outer z-index set to 999 so the sidebar will go underneath when passing the container

    That’s it basically. Combined with the CSS added to Custom CSS, you should now be able to have a full width container element while maintaining the sidebar that goes underneath the full width container when passing.

    It works in mobile as well, since there is no sidebar (it’s actually pushed all the way down with the default setting already).

    If you have questions, let me know. I hope it helps some people, I know it took me a few hours to get this to work how I wanted on blog articles where I have the default layout setup with a sidebar.

    Cheers!

    #1839541
    David
    Staff
    Customer Support

    Thats great – i am wondering how this property works:

    margin-left: calc(50% / .64 - 50vw) !important;

    I assume that maths is considering the %width the sidebar occupies.

    #1839595
    Sjoerd

    The .64 is the actual percentage of the content container that can be set in the Customizer I believe. It’s a bit of trial error to find the right number, but using the dev. inspector it’s fast and easy.

    So far I haven’t found problems yet. No issues on iPhone / iPad or Macbook 15 inch. Also tried my 27 inch windows pc and works great too!

    #1839659
    David
    Staff
    Customer Support

    Yeah – i expected as much – I assume .64 instead of .65 ( as customizer layouts are set to 5% increment ) accounts for the spacing around the container.

    Nice solution but would require tweaking for different sidebar layouts – thanks again for sharing.

    #1839661
    Sjoerd

    Yes, I think it’s .64 because of the spacing, since I have it set to 65% / 35% ratio (content / sidebar) with a 40px gap if I am not mistaken.

    Always happy to share ๐Ÿ™‚

    #1839666
    David
    Staff
    Customer Support

    Thats cool – going to have a play with that ๐Ÿ™‚

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