Content width

Hi there,

yes there is a difference.

The Layout Element will affect the entire post container, on the single post for example; if the featured image is within the post container it will be affected by it.

The Classic sites CSS applies to just the Content ( single post and archives ) and Comments. So things like the Title, Featured Image and Post Meta will keep the themes container width.

Thanks David, that's really interesting as this is precisely what I'm trying to achieve with the testing page linked here.

I take as an example the top of a Washington Post page but there are similar layouts in many News sites, including the NYT:
https://cloudup.com/cxzDn33TSnp

The idea is to keep all texts with a max-width but set different sizes for the featured image and inline images:
- either full width, contained to the default width or a custom one.

The demo site's featured image of this example post with the Lighthouse corresponds to the layout of the WAPO's capture with vegetables, but didn't find how to deal with the inline picture below in order to get custom left/right margins or max-width.

Theres a few ways to go about this.
With the Classic site, you only need to deal with the in content images.
If you're using the Block Editor. you can select Wide Width option in the Image Blocks Toolabr, which is the same as giving a HTML img a class of alignwide. This will stretch the image to the width of the Container + the Container padding. Making them a little wider.

And we can use some CSS to step that up on larger screens like so:

@media(min-width: 1024px ) {
    .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
        margin-left: -100px;
        width: calc(100% + 200px);
        max-width: calc(100% + 200px);
    }
}

@media(min-width: 1200px ) {
    .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
        margin-left: -200px;
        width: calc(100% + 400px);
        max-width: calc(100% + 400px);
    }
}

That's nice, thank you!
As I'm never using Gutenberg stuff I simply used the image class + the CSS and works great.

If you don't mind, as I want to understand how things work, may I ask you:

- How would I get the Featured Image (lighthouse) on full width in this example?
I'm using 1400px for container width and it has 60px padding all around.
Is the Featured Image width limited to the image's original max width (1280px)?

- Why using 2 different sets of values for min-width 1024 and 1200?
Are those always proportional to the screen size or is it only for sizes up from 1024?
As I'm using a container of 1400, would I also need to add values for this min-width also?

1. – How would I get the Featured Image (lighthouse) on full width in this example?
You can force an image to fill its container with a little CSS:

.featured-image img {
    width: 100%; 
}

2. – Why using 2 different sets of values for min-width 1024 and 1200?
The media queries and sizing were arbitrary. The simple logic was to create stepping points to scale up the image to be extra wide but not full width.
The 100% in the calc = the original image width, which in this case was 800px ( as thats the width of the container the image is in ). So at 1024px the image is forced to 800px + 200px = 1200px. And then when you hit 1200px it goes to 800px + 400px = 1000px.

You can adjust them to suit your needs, or add more if required eg,

@media(min-width: 1400px ) {
    .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
        margin-left: -260px;
        width: calc(100% + 520px);
        max-width: calc(100% + 520px);
    }
}

We could do this with some auto calculations as well so they just resize to fit the screen, but that can be problematic as things like Scroll Bars can interfere with that.

Now the question is, do you want ALL images in the post to respond like so ? If you do we can rewrite the CSS to make that happen. Let me know.

Many thanks David and sorry for asking too many questions.

1. That works fine. I did test something similar with the Inspector but, for some reason, never succeeded in getting the correct result.

2. Good to know, thanks. For others reading this thread, I guess there is just a small typo at the end of this para #2:
800px + 400px = 1000px. Should probably read 1200px.

The question you are asking is indeed the good one and I cannot reply to that yet as I'm just testing waters for a redesign of an old site that has become extremely messy over the years and I'll have to deal with existing content and images for start working with the layout and then re-arrange the whole thing.

So, for the time being, I'm just testing layout options at this temporary URL but the project will probably use ZEAL as a starting point because of the dark layout (my previous ticket was about those patterns in there).

As I'm still waiting for a final decision about this project I'll mark this here as resolved and will probably get back to you later on with concrete pages and layouts. But I don't think I'll need a global solution for those images. The way it currently works looks nice to me but it's too early to decide.

Thanks a lot for your help so far!

Ooops - #2 edited to set that right :)

No problems - as a note Zeal is built with Elementor .... might be easier to just build the dark color theme from scratch in the Themes colors.

hope the redesign goes well.

Yeah thanks for the heads up but no problem for removing Elementor but will see what works better once those clients decide what they really need. Not simple...

PS on another completely different note: one of my previous recent threads was also about what the import/export feature includes as I'm also testing importing settings from another's client site and I confirm that this works fine - except that I also found out that Customizer's Additional CSS entries are NOT exported and maybe this should be notified somewhere.

Yeah thats correct, the Theme import/export only controls the themes settings. Whereas Additional CSS is a WP function that just happens to write into the Themes options. Ill see if we can update our docs to make that clearer :)