The following is a code snippet originally posted by Daniel McClure on GitHub as a Gist.
functions.php
“`php
style.css
“`css
/* Support Full Width Elements */
.entry-content .alignfull {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
/* Support Wide Align Elements */
.entry-content .alignwide {
margin-left : -100px;
margin-right : -100px;
max-width : 1024px;
}
“`
Original Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Register Theme Support for Gutenberg Wide Images | |
| */ | |
| function enable_wide_images() { | |
| add_theme_support( 'align-wide' ); | |
| } | |
| add_action( 'after_setup_theme', 'enable_wide_images' ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Support Full Width Elements */ | |
| .entry-content .alignfull { | |
| margin-left : calc( -100vw / 2 + 100% / 2 ); | |
| margin-right : calc( -100vw / 2 + 100% / 2 ); | |
| max-width : 100vw; | |
| } | |
| /* Support Wide Align Elements */ | |
| .entry-content .alignwide { | |
| margin-left : -100px; | |
| margin-right : -100px; | |
| max-width : 1024px; | |
| } |
Leave a Reply