With the new Gutenberg Wordpress 5 release some themes from Wordpress 4 may not have the FullWidth and WideWidth coded in the theme function. To create this follow the below instructions.
Navigate to the Wordpress theme. On a localhost it may look similar to below. On FTP it may look slightly different with \public_html
C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme
or
\public_html\www.yourwebsite\ wp-content\themes\yourtheme
Open the function.php file
C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme\ functions.php
Add the below code(to bottom of 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' );
Open the themes' CSS file
C:\xampp\htdocs\KingCon\wp-content\themes\yourtheme\ style.css
Add the below code (to bottom of file):
.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;
}
Depending on the theme you may need to adjust the CSS to match. Example in my case I had to amend the alignfull marign as below:
.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 ); */
/*Mike*/
margin-left : -90px;
margin-right : -90px;
max-width : 100vw;
}
.alignfull img {
width: 100vw;
}
