Full width in Wordpress 5

Web Development Hits: 43

Add full width in Gutenberg Wordpress 5. 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.

Print

Related Articles