Issue with GenerateBlocks Image Width/Max-Width Not Applying on Frontend

  • Hello, I have a question regarding GenerateBlocks images.

    When I set width or max-width in the GenerateBlocks image settings, the changes display correctly inside the editor.
    However, the actual rendered page does not reflect those width settings at all.

    I spent several hours trying to troubleshoot this with GPT, but I still couldn’t identify the root cause or find a solution.

    I really don’t want to wrap every image block inside a container just to manually adjust widths.
    That approach consumes way too much time and energy.

    I would greatly appreciate any help in resolving this issue.

    I’m sharing the images and the page URL below for reference.

    https://imgur.com/a/LyvQwbh

    https://pickleplus-coupon.com/%ed%8b%b0%eb%b9%99-%eb%8f%99%ec%9d%bc%ea%b0%80%ea%b5%ac-%ea%b8%b0%ea%b8%b0-%ec%9d%b8%ec%a6%9d-%ed%95%b4%ea%b2%b0-%eb%b0%a9%eb%b2%95/

  • Hi there,

    Are you using an image optimization plugin like Imagify or similar? That’s likely why the <figure> tag, which normally wraps the image, is being replaced with a <picture> tag. This causes your block editor styling to not apply because GB targets the <figure> tag.

    A simple fix is to add this CSS:

    picture {
        display: block;
        overflow: hidden;
    }

    You may also want to reach out to the plugin’s support regarding this behavior.

  • Thanks to you, I found the cause. It was the Imagify plugin. Thank you so much.

  • You’re welcome, glad to hear that!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.