Shape 5

In Masonry, it will display the feature image using its thumbnail size settings.

Upon checking in various devices, I noticed that the linear gradient gray overlay image is wider than than thumbnail feature image.

Say for example, while viewing the site using  my desktop or a laptop, the gradient gray overlay is just fine and it does its purpose so that the excerpt words would be readable regardless of the feature image dominant color.

However, using my iphone or ipad, the gradient gray overlay image width is wider than the thumbnail feature image width and it does not look good.

How can I fix this?
...should I just set my thumbnail feature image to an appropriate size? if yes, what should be my thumbnail size settings?
...should I just remove the gradient gray overlay image (but i prefer not to)? if yes, which CSS file do I need to edit?

Is there a way to dynamically resize the width of the gradient gray overlay to be the same size as the feature image being displayed?
That it should always the same size width of the feature thumbnail's image.

Can you provide a URL for me to pass on to the designers, so they can see the issue?

Hi Tristan, I have sent you two personal messages.

Thanks for letting me know.  I only check my PMs when I'm expecting a message from someone.  I've forwarded your link to the designers, I'll let you know what they find.

Here's the response I got from one of the designers: