Tagged: blog post image, image resizing, responsive image
I am using an automation system which is adding blog posts automatically. Within the blog posts, there is an image which has a max-width:600px style added to it. This image used to resize until one of the more recent Enfold updates. Now, the image does not scale and is not view-able on smartphones as it goes off the screen.
I need the image to be responsive without removing the style of max-width:600px from the actual img element.
Here is an example of the code my automation inserts into a blog post:
<div>
<div>FREE Lucky’s beanie with wheel and tire purchase! #Snowing #8lug #LiftedLife #OffRoad #Represent</div>
</div>
Here is my temporary solution to the issue that I have inserted to fix it by CSS:
#main .entry-content img {max-width: 96% !important;}
And, here is a link to a blog post so you can review it:
If you turn off my CSS hack, you will see the issue that I am referring to. Please let me know if there is a better way to fix this as it could be happening to a lot more people. Like I said, the images did scale just fine until one of the recent updates. Unfortunately, I don’t know which update created the issue.
Thanks!