OllieWP / ollie

A finely-crafted WordPress block theme by Mike McAlister

Home Page:https://olliewp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Image :: Convert the classic editor content to a block editor content create a non-responsive image issue

faisalahammad opened this issue · comments

Describe the bug
When content created using the classic editor is converted to the block editor (Gutenberg), the image will not be responsive. Gutenberg wraps the image using a <p> tag, which causes the issue.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new post using the classic editor.
  2. Convert the post into Block editor.
  3. Check the post image from frontend.
  4. See the non-responsive image issue.

Expected behavior
The image should be responsive for all devices.

Screenshots
post content image

Quick Fix:
Adding the following CSS will resolve the issue.

.entry-content img {
  max-width: 100%;
}

Final Output:
Responsive image preview

I've just made this fix and it will be shipped in the next update. Thanks for the heads up!