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

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 10 months ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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 : 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

    #1069013
    Leo
    Staff
    Customer Support
    #1073871
    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

    #1073960
    Leo
    Staff
    Customer Support

    Edit your code to this:

    .single .entry-content>*:not(img) {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
    #1074474
    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

    #1074936
    Leo
    Staff
    Customer Support

    Try this instead:

    .single .entry-content>*:not(.wp-block-image) {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
    #1076109
    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

    #1076510
    Leo
    Staff
    Customer Support

    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.

    #1076595
    dongsoon

    Thanks for your help.

    Have a good day!

    #1076611
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.