Image full width Gutenberg not working

Hey,
I’m seeing your fullwidth images working on the post you linked to. Are there specific images that are meant to be full width but are not? Are you using the cover image block?

Hannah

Hi Hannah,
thanks

A lot of them should be full width. For example the 3rd one should be full-width and instead is small and on the left of the page.

I am using “image block” on Gutenberg. It has always worked for me under virtue before and after the full roll out of Gutenberg. I have just read that on some theme it doesn’t work and that for virtue the way around is to use Cover (which was not there before).

So no, I am not using Cover and would prefer no to have to edit every single of my article and photo that I created with Gutenberg as it was working perfectly before. Also, the “cover block” height is limited and the one on “image” is just perfect.

Here area few other post that have the pict on the left:
– https://talesfromthelens.com/2018/11/06/isla-de-la-plata-ecuador-bird-whale-watching/ (the jumping whale image a the bottom – or the 2 birds wih 2 feet)
– https://talesfromthelens.com/2018/10/31/day-trips-from-quito-budget-friendly/ (every image before a H2 title should also be in fullwidth and it is not)

Thanks for your help

You don’t need to use the cover image block. The normal image block should work just fine. Are you selecting the fullwidth option? https://postimg.cc/2L6XW0Yy
I’m not seeing any of your images left aligned. Can you send a screenshot of that?

Hannah

Hi Hannah,

Here you go :

backend – where i correctly chose Full width of wide width https://postimg.cc/k6pcv9TQ
the post: https://postimg.cc/0KSpGSMv

This is the same for every single post.

I’m not experiencing this on my sites. What size images are you uploading? Make sure they are at least 2000px wide.

Hannah

Thank you Hannah, but it isn’t an issue with the size of the image uploaded. It worked perfectly in the past and now it doesn’t.

We have checked on 3 different devices and they all show the same issue on every post with full-width image. Can you send me a screenshot of what you see?

Cheers

Sorry, I meant that I am not having an issue with left aligned image on my sites, but I am now seeing the issue on yours. Have you tried deactivating your plugins to test if any are conflicting?

Hannah

Yeah I have done all the basic check.

If I choose Full width with the block Cover, it works and if I choose full width with the block Image it doesn’t.

I checked my CSS and ll seems fine too. If I delete all the code, I still don’t have the image full width. I checked the theme, the page option, all the plugin, nothing works which is why I thought that was the theme that didn’t handle this Gutenberg feature.

Hi, solved the issue by adding the beow code to my css

/*
full width
*/
.entry-content .alignwide {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
.entry-content .alignfull {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
.alignfull img {
width: 100vw;
}

Help from >> https://weblines.com.au/gutenberg-blocks-wide-alignment-full-width/

.wp-block-image.alignfull, .wp-block-image.alignwide {
    max-width: none;
}

Just add that css ^^

You don’t need the other you added.

Ben

Perfect Ben. As always. thank you so much