Paste the below code to your function.php file
/** * Register support for Gutenberg wide images in your theme */ function mytheme_setup() { add_theme_support( 'align-wide' ); } add_action( 'after_setup_theme', 'mytheme_setup' );
Use below CSS
/* Gutenberg Width Image -------*/ .alignwide { margin-left : -200px; margin-right : -200px; padding: 20px 0; } .alignfull { margin-left : calc( -100vw / 2 + 100% / 2 ); margin-right : calc( -100vw / 2 + 100% / 2 ); max-width : 100vw; padding: 20px 0; } .alignfull img { width: 100vw; } @media only screen and (max-width : 1200px){ .alignwide { margin-left : calc( -100vw / 2 + 100% / 2 ); margin-right : calc( -100vw / 2 + 100% / 2 ); max-width : 100vw; padding: 10px 0; } }
Source: https://motopress.com/blog/wide-or-full-width-alignment-in-gutenberg-wordpress/