Support » Theme: Sinatra » Gutenberg “Cover” block not full width

  • Resolved bistromatic

    (@bistromatic)


    Hello,

    I’m using the Gutenberg block “Cover” to create a static banner. It’s set to full width but it does not go all the way to the right border of the page. It leaves a small white gap on the right hand side. See the link to the test page. The page is set to have no sidebar.

    I can’t find a CSS setting to fis this. I’ve also searched the forum but could not find this issue.

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Branko

    (@brankoconjic)

    Hey @bistromatic,

    That looks fine on my end. Here’s a screenshot.

    Can you let me know which browser and screen size you are testing on?

    Thread Starter bistromatic

    (@bistromatic)

    Hello @brankoconjic,

    I’ve checked it on Firefox, Chrome, Opera, and Edge. It’s on all browsers.

    Here are screenshots for all browsers.

    You can see the little gap on the right hand side.

    Thread Starter bistromatic

    (@bistromatic)

    Hello again @brankoconjic,

    I just measured the gap on all browsers:

    Firefox: 9px
    Chrome: 8px
    Opera: 7px
    Edge: 8px

    I have no idea what’s happening!

    I switched to the twenty-twenty-one template and the gap is gone.

    I also tried the different layout options of Sinatra and the gap disappears when I select Boxed.

    Thread Starter bistromatic

    (@bistromatic)

    Hello again @brankoconjic,

    I did some more testing. I checked it on my laptop to make sure it’s not the computer and it’s the same gap.

    However, the gap does not show up on my iPad which is the Safari browser.

    An ideas what’s going on?

    Thread Starter bistromatic

    (@bistromatic)

    I did another test. When I turn off the max-width rule below the banner extends but then I get the same gap next to the header and footer.

    body:not(.sinatra-layout__boxed).sinatra-no-sidebar .entry-content .alignfull, body:not(.sinatra-layout__boxed).sinatra-no-sidebar .si-fw-section {
    	position: relative;
    	width: 100vw;
    	left: 50%;
    	margin-left: -50vw;
    	/* max-width: var(--si-screen-width,100vw); */
    }

    I’ve added that screenshot to the screenshots as well.

    Branko

    (@brankoconjic)

    Try this CSS and let me know if it makes any difference:

    .wp-block-cover, .wp-block-cover-image {
        padding: 0;
    }

    You can add the code into the Additional CSS field in Appearance » Customize.

    Thread Starter bistromatic

    (@bistromatic)

    @brankoconjic I tried the CSS you suggested but it didn’t change anything.

    I did another quick test where I set up a plain html page with a <div> with the following style:

    .banner {
        width: 100%;
        height: 200px;
        background-color: #cff;
    }
    

    I’ve added the screenshot as default-margins.png.

    I measured the gap and it’s exactly the same 9px I saw with the wp-block-cover. Apparently it’s the default margin or padding for the Firefox viewport.

    Thread Starter bistromatic

    (@bistromatic)

    Hello @brankoconjic,

    Did you have a chance to look at the latest comment and screenshot? I would really love this to work. Sinatra is a great theme.

    Branko

    (@brankoconjic)

    Hey @bistromatic,

    I’m still not able to replicate the issue on my end, but this has been reported as a bug on our end and we will take a closer look into that before releasing next update.

    Thanks!

    Thread Starter bistromatic

    (@bistromatic)

    Thank you @brankoconjic!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Gutenberg “Cover” block not full width’ is closed to new replies.