[Resolved] Gutenberg align-wide / Full Width Blocks

  • Author
    Posts
  • #14171

    Buruko
    Participant

    Hello,

    I’m using the default page with menus for my site but would like to break up the blocks with full width rows of color. The easiest way to achieve this appears to be grouping blocks together and then using full-width alignment on the group and assigning a background color.

    Although full-width alignment was not an option on my Groups I enabled it within the Child Theme I created by adding:

    add_theme_support('align-wide');

    To the functions.php file. However while I can view the page and align-wide settings in the editor when changes are saved and viewed on the front end the background does not extend properly.

    Is there some additional changes needed to enable full-width alignment of the blocks? Is this not supported by the current version of the Ultra theme?

    If not is there an alternative method that maintains the responsive nature of the site to accomplish what I’m trying to do? I have found a few solutions via CSS tricks but they destroy any responsive element they are used on.

    Appreciate your assistance in this matter!

    #14172

    Buruko
    Participant
    This reply has been marked as private.
    #14180

    Andrew Misplon
    Keymaster

    Hi Buruko

    Thanks for posting.

    I’ll do my best to include further Block Editor support in the next theme update.

    Ideally, the Full-Width page templates should have been named No Sidebar. If you’d like to make that template truly full-width, try the following:

    .page-template-full-width-no-title .site-content > .container {
    	max-width: none;
    	padding-right: 0;
    	padding-left: 0;
    }

    There are a few ways to tackle the wide and full issue. Perhaps try the following:

    @media (min-width: 750px) {
    
    	.alignfull {
    		max-width: 1000%;
    		margin-right: ~"calc(50% - 50vw)";
    		margin-left: ~"calc(50% - 50vw)";
    		width: auto;
    	}
    
    	.alignwide {
    		max-width: 1000%;
    		margin-right: ~"calc(25% - 25vw)";
    		margin-left: ~"calc(25% - 25vw)";
    		width: auto;
    	}
    }

    Let me know how that goes. Thanks.

    #14181

    Buruko
    Participant

    Would I need to add:

    @media (min-width: 750px) {
    
    	.alignfull {
    		max-width: 1000%;
    		margin-right: ~"calc(50% - 50vw)";
    		margin-left: ~"calc(50% - 50vw)";
    		width: auto;
    	}
    
    	.alignwide {
    		max-width: 1000%;
    		margin-right: ~"calc(25% - 25vw)";
    		margin-left: ~"calc(25% - 25vw)";
    		width: auto;
    	}
    }

    To the style.css in the Child Theme folder?

    I believe there is a No Sidebar template page option I will try using that as well but I really want the content to stay in the center not extend to the edges. I merely want the background color to extend pass the center and to the edges.

    #14183

    Buruko
    Participant
    This reply has been marked as private.
    #14184

    Andrew Misplon
    Keymaster

    Thanks for your feedback. The CSS can go at Appearance > Custom CSS, Customize > Additional CSS or in your child theme stylesheet, it’s up to you. You can try replacing all with the following:

    @media (min-width: 750px) {
    
    	.alignfull {
    		max-width: 1000%;
    		margin-right: ~"calc(50% - 50vw)";
    		margin-left: ~"calc(50% - 50vw)";
    		width: auto;
    	}
    
    	.alignwide {
    		max-width: 1000%;
    		margin-right: ~"calc(25% - 25vw)";
    		margin-left: ~"calc(25% - 25vw)";
    		width: auto;
    	}
    
    	.wp-block-group__inner-container {
    		max-width: 85.7143rem;
    	}
    }
    #14185

    Buruko
    Participant

    Thank you for the update. I’ve added this through the Additional CSS option presently but may combine it to a child theme style.css file later.

    I ended up using:

    @media (min-width: 750px) {
    
    	.alignfull {
    		max-width: 1000%;
    		margin-right: calc(50% - 50vw);
    		margin-left: calc(50% - 50vw);
    		width: auto;
    	}
    
    	.alignwide {
    		max-width: 1000%;
    		margin-right: calc(25% - 25vw);
    		margin-left: calc(25% - 25vw);
    		width: auto;
    	}
    
    	.wp-block-group__inner-container {
    		max-width: 85.7143rem;
                    margin: auto;
    	}
    }

    This caused the Group block to ‘center’ automatically while the previous code left it on the left side of the screen although it did maintain the container size. Also I note I had to remove the ~ and "..." from around the parenthesis otherwise it would not work properly.

    It seems to maintain the responsive nature of the page however no matter what template I use Full Width or No Side Bar the page has about 5px on the left and right side once collapsed to a mobile view. Thoughts?

    Very much appreciate the speedy reply and assistance with this! THANK YOU!

    #14186

    Andrew Misplon
    Keymaster

    Glad to hear you’re making progress. You can try adding to the Custom CSS:

    @media (max-width: 749px) {
    
    	.alignfull,
    	.alignwide {
    		margin: 0 -1.78571em;
    		padding: 0 1.78571em;
    	}
    
    }

    After the next theme update, you should be able to remove these rules.

    #14187

    Buruko
    Participant

    That works like a champ! Thank you!

    Just for resolution seekers…

    Add Following for Align Wide support for theme:

    @media (min-width: 750px) {
    
    	.alignfull {
    		max-width: 1000%;
    		margin-right: calc(50% - 50vw);
    		margin-left: calc(50% - 50vw);
    		width: auto;
    	}
    
    	.alignwide {
    		max-width: 1000%;
    		margin-right: calc(25% - 25vw);
    		margin-left: calc(25% - 25vw);
    		width: auto;
    	}
    
    	.wp-block-group__inner-container {
    		max-width: 85.7143rem;
                    margin: auto;
    	}
    }

    Then add following for Padding issue in Mobile Resolutions:

    @media (max-width: 749px) {
    
    	.alignfull,
    	.alignwide {
    		margin: 0 -1.78571em;
    		padding: 0 1.78571em;
    	}
    
    }

    These are to be corrected in future theme Updates.

    • This reply was modified 2 years, 3 months ago by Buruko.
    #14196

    Andrew Misplon
    Keymaster

    Thanks for posting your solution, appreciate it. I’ll let you know once this has been included in the theme. Cheers for now 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Scroll to top