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

[dongsoon]

Hi,

I’d like to to make a more narrow text section width & wider in Wide Width image option.
For example, I’d like to set text section width and image section width as below
– text section width : 650px
– image section width when i select Wide Width image option : 900px

When I test below code, max image width limited to text width + 100px
.single .inside-article > *:not(.page-header-image-single) {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}

or

.entry-content {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}

Where can I get a proper solution?

Thanks, advance

[Leo]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dongsoon]

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

[Leo]

Edit your code to this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dongsoon]

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

[Leo]

Try this instead:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dongsoon]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[dongsoon]

Thanks for your help.

Have a good day!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts