Full width image option not available in block editor

Shapely
1

Hi there,

I’ve gone through the answers here but couldn’t find a solution for my issue. I am using full width template but image doesn’t stretch full. It shows that the default block editor should be able to do this: https://en.support.wordpress.com/wordpress-editor/blocks/image-block/#wide-and-full-width-images. Is the option not showing because of Shapely?

Anyhow, please have a look at this page made using Block editor. https://www.avmcacademy.asia/events-news/

The 1st image has been added using the the default Cover block, 2nd one using Smart Slider 3, and the 3rd one using Image block set to full size with a width of 1980. I can currently use Smart Slider as a workaround but how do I do it using the default Cover or Image blocks?

Additionally, I also have another question about the white gap between the header and the first image. Do I open another thread for that or can I ask here?

2

Hey there

The problem here is that our theme uses a different layout, its 1170px wide layout, but you can fix this by this css code:

#content .container {
width: 100%;
padding: 0px;
}

3

Thank you so much. That seems to have done the trick. Now I’m left with that blank space at the top and bottom. I don’t think this is the blank space cause by the removal of the title but instead I think these are padding. I tried adjust the position with this:

#content  {
	position: relative;
	top: -50px;

But this messes up the home page as well, whereby the slider overlaps the header.

4

hey there

Ok, in this case please add this CSS in appearance - customize - additional CSS

section.content-area.pt0 {
padding-top: 0px;
top: -20px;
}

Thanks!
Colorlib Support Team

5

Thank you Noda. Tried that and it solved the gap the top. For the bottom, i added another line so it looks like this:

section.content-area.pt0 {
padding-top: 0px;
top: -20px;
padding-bottom: 0px;
}

This seems to have helped reducing more of the gap at the bottom but I’m still see a bit of space there. Hope you can assist.

6

I also noticed that the outermost footer widgets are now touching the edges of the screen because of the full width fix. Any way to make it so that it doesn’t affect the footer or the header? Or will there have to be another fix for the footer/header space on its own?