Gutenberg editor-style Full width & Width width layout

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/

Copyright © 2024 Siam Naulak.
magnifiercrossmenu