Gutenberg “Cover” block not full width

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?

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.

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.

• This reply was modified 4 years ago by 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?

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.

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.

@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.

• This reply was modified 4 years ago by bistromatic.
• This reply was modified 4 years ago by 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.

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!

Thank you @brankoconjic!