How to fit wide gutenberg setting within container?

[Peter_Fae]

Hey. I’m trying to achieve a visual effect and not sure how this plays out with the CSS. Figured the adepts at X-Theme would understand better than I the nature of X Pro (or X regular).

I’ve got this code going on with a certain category of posts ->

@media only screen and (max-width: 1300px) and (min-width: 1px){
.x-full-width-active .alignwide {
width: 88vw;
max-width: 88vw;
margin-left: calc(50% - 44vw);
}
}

@media only screen and (min-width: 1331px){
.x-full-width-active .alignwide{
width: 70vw;
max-width: 100vw;
margin-left: calc(60% - 44vw);
}
}

The idea is, how to make Images & Galleries, as well as Vimeo and other block-objects, fit within the container that’s been established, flush with the edge.

Here’s an example of usage -->

2018-7-27 – Earth & Sky

On an iPad or certain size screen as well as an iphone, the content is flush with the edge of the white container that holds the content. However, on a larger screen (and I suspect other screen sizes), it bleeds out. I got this code from WPMUDEV yet i’m feeling that support here would have a better sense of how things FIT into the X-Theme as said.

Is there a basic CSS that can be used that will achieve the effect?

[christian]

Hey Peter,

Regretfully, we don’t have the CSS code to achieve the effect. The simplest way I can recommend is you turn the side padding of the content area to 0. All your content will be flushed to the sides and you just add side margins to the content you wish to contain.

Thank you for understanding.

[Peter_Fae]

Mmm… what would the code be for that?

[friech]

Hi Peter,

Sorry but I am not entirely certain of your issue, the layout of your post looks fine to me.

• 

Is your concern about these images not stretching to the full width of the container?

• 

If so, then please crop and reupload that images, not less than the max-width of the container (which is 1200px). That way your one image block will fill up the entire container width.

Currently, your image width is only 1024px while the container is 1200px (minus 40px padding on both side), that’s why it did not entirely cover the container.

And please note that Gutenberg has its own structure, it is independent from the theme.

Block Editor Handbook

Thanks,