Breadcrumbs

Home Web Development Add full width in Gutenberg Wordpress 5
Add full width in Gutenberg Wordpress 5 PDF Print E-mail
Written by Tom   

 

You need access to your theme and core files

 

Open the functions.php . Unusually located C:\xampp\htdocs\KingCon\wp-content\themes\yourthemedesign\functions.php

Add the below code at the end of the file. Adding to your theme’s functions.php file will support full-width and wide-alignment blocks


 

/**

* Register support for Gutenberg wide images in your theme

*/

function mytheme_setup() {

add_theme_support( 'align-wide' );

}

add_action( 'after_setup_theme', 'mytheme_setup' );

 

 

You also need to add the CSS code to the themes style.css. So the theme’s CSS styling can handle them correctly.

 

 

.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 );

max-width : 100vw;

}

.alignfull img {

width: 100vw;

}

 

 

Admin should now show Full Width and Wide Width options

 

 

For more info click here

 

Or

 

Use Stackable for Gutenberg Blocks from Wordpress