Home › Forums › Support › How to make more narrow text section width & more wide in Wide Width image
- This topic has 9 replies, 2 voices, and was last updated 3 years, 2 months ago by
Leo.
-
AuthorPosts
-
November 20, 2019 at 9:32 am #1068751
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 : 900pxWhen 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
November 20, 2019 at 12:16 pm #1069013Leo
StaffCustomer SupportHi there,
Something like this should help:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 23, 2019 at 7:13 am #1073871dongsoon
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
November 23, 2019 at 8:33 am #1073960Leo
StaffCustomer SupportEdit 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/November 24, 2019 at 2:07 am #1074474dongsoon
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
November 24, 2019 at 8:18 am #1074936Leo
StaffCustomer SupportTry 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/November 25, 2019 at 6:36 am #1076109dongsoon
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
November 25, 2019 at 8:25 am #1076510Leo
StaffCustomer SupportNot 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/November 25, 2019 at 9:18 am #1076595dongsoon
Thanks for your help.
Have a good day!
November 25, 2019 at 9:33 am #1076611Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.