Support

Account

Home Forums Gutenberg Gutenberg Mobile Preview – Bootstrap 4

Helping

Gutenberg Mobile Preview – Bootstrap 4

    • jarvis

    • February 3, 2021 at 2:11 am

    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

    • jarvis

    • February 3, 2021 at 11:50 pm

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.