How to make more narrow text section width & more wide in Wide Width image

Hi there,

Something like this should help:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743

Hi,

I using the below code.

.entry-content>*:not(img) {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

This code works well for posts.

However, I do not want these rules to apply to the page.
Can you give a hint on how to fix the code?

Thanks advance

Edit your code to this:

.single .entry-content>*:not(img) {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

Thanks for your help.

But, In this case all image's width are same with test area with, 650px

Is there any solution?

Thanks advance

Try this instead:

.single .entry-content>*:not(.wp-block-image) {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

Thanks for your help.

This code works to text and image, but It don't work to the other block : for example embedded block(youtube/Vemeo..), layout block(ex, Gallery block)...

Is there a good way to solve this problem?

Thanks advance

Not really at the moment without a block plugin like Kadence block or GhostKit at the moment.

You'd have to keep adding on to the :not(.wp-block-image) which isn't the best solution.

I'd recommend checking out one of the plugins mentioned above.

We also have an upcoming block plugin which will make this layout possible without any CSS as well.

Thanks for your help.

Have a good day!

No problem :)