Couldnt Resize image

@yashvi2026

That's because of your custom CSS code.

Remove this part:

styles: `.image{max-width:100%;}@media (max-width: 480px) {.image {display: inline-block;height:auto !important;width:100% !important;max-width:100%;}}`,

from editor.BlockManager.add('image', {

I confirm the component resizer doesn't account for !important right now, but I'd follow, more or less, what @mosh-tudor suggested.

You don't need to remove the entire styles, as my guess is what you need, but I don't see the point of having !important there. If you need !important there, probably the problem is outside the image component.

I need to use !important in my style. I've noticed that in other components, when !important is included in the default styles, the styles added through the style manager also include !important to ensure they override the default.

So, when the style is changed manually in the Style Manager, !important is added. In the same way, when resizing the component, the styles should also be added with !important, right?

Thanks for reporting this, @yashvi2026.

Great question about Couldnt Resize image. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!