MEC shortcode is distorting Featured Image

[ohiocannabis]

So I have the MEC in a shortcode on my home page showing up coming events:

OhioCannabis.com - News | Media | Lifestyle

But for some reason it’s distorting and blurring the Featured Image

The Featured Image looks fine once you click on the event, but when it’s being previewed it looks like crap. I’ve tried multiple sized images and still getting the same effect

[prakash_s]

Hello @ohiocannabis,

Thanks for writing to us.

It seems there is an issue with small image rendering and the CSS code making it large just because it looks pixelated. I would suggest you please add this custom CSS code to get rid it. You need to add this code to Global CSS.

.mec-event-grid-classic img {
    width: auto;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[ohiocannabis]

Ok yeah no problem I can add that. But where do I find the Global CSS area to enter it in the right place?

The issue you mentioned, would it be within the plugin itself?

I’m using Pro with all of the suites programs, I’m surprised I’m having this problem?

[prakash_s]

Hello @ohiocannabis,

You need to go to the Cornerstone—>Theme Options —>Custom Code—>Global CSS.

Hope it helps
Thanks

[ohiocannabis]

Ok so I was able to find that and add that code, thank you.

While it seems to have reduced the size of the preview, it still looks pixelated

What did we miss?

I’ve tried an image that was 2600x2600px, 1000x1000px & it’s still blurry. I have a 500x500px image to use, but I’ll assume the preview will still look blurry

Also, any idea why I’m having this issue if I’m using Pro & MEC? Shouldn’t it be set right out of the box?

Is there a way to see if I have any CSS that is negatively affecting this?

[ohiocannabis]

Still blurry & stuck on this one.

Thanks!

[ruenel]

Hey John,

The MEC Shortcode uses medium-sized images. You may need to change the image size in Settings > Media to at least 500x500.

You may also need to install the Regenerate Thumbnails plugin to be able to regenerate the image sizes.

Kindly let us know how it goes.

[ohiocannabis]

Ok so I expanded the medium image size to 500px and also installed that plugin.

Not sure if I see much of a different?

I don’t know, what do you think of it now, does it still look blurry to you?

[ruenel]

Hello John,

It is still displaying a 300x300 image size. You will have to run the Regenerate Thumbnails plugin first, clear all your caches, and then test the page again.

Cheers.

[ohiocannabis]

Ok I did as you suggested and think it looks a lot better.

I think there’s still a bit of distortion overall, but it’s significantly better.

What do you think about it on your end?

[ohiocannabis]

Wanted to bump this up for a final conclusion

[marc_a]

Hey John,

Upon checking your homepage MEC section. The images looks fine on my end. I don’t see any distortion on the images. Maybe it is just our eyes playing tricks on how we’ve viewed because we are viewing it on a large and small image.

Thank you.