Hi All,
I hope someone can help put me out my misery!
I’ve created a basic theme using the Bootstrap 4 framework.
I used to use Flexible Layouts but currently migrating to Gutenberg
So far, so good! However, when I use Gutenberg’s preview and toggle Desktop/Tablet/Mobile
It doesn’t seem to pull through the Bootstrap grid and therefore looks pants.
I tried to add Bootstrap CSS via my theme’s function file like so:
function theme_gutenberg_block_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( [
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
'style.css',
'css/editor.css',
] );
}
add_action( 'after_setup_theme', 'theme_gutenberg_block_styles' );
I must be missing something but can’t see what.
Any help would be very much appreciated!
Thanks
Just to follow on from this, I believe the issue is due to the preview.
If I’ve got this right, the preview pane sets the size via in line styles, so the Bootstrap grid isn’t being applied as opposed to the actual browser resizing
Can’t think of a way around it! Just be good to be more accurate on the preview front you see.
Thanks