Featured Image never responsive on Mellow theme

[Matt]

I’m at whits end here. I’ve written two posts so far, and the featured images for each are not mobile responsive at all. They look great on desktop, iffy on tablet, and horrible on mobile. They don’t size down at all, so it just cuts the image off.

Example: the featured image on the desktop version is a 500×400 image png, and spells the word alpha. Looks great and is centered with plenty of room around the word. On mobile, though, you can only see part of the letters ‘ph’.

Is this the Mellow theme, or Generatepress, or Elementor? I’ve poked around everywhere and read so many threads, but can’t find anything useful. Please and thank you!

[Leo]

Hi there,

That’s because it’s using a header element/page hero which is displaying the featured image as a background image.
https://docs.generatepress.com/article/header-element-overview/#background-image

Background images are not responsive by nature (not a theme thing) unfortunately.

We could use a switch out the image for mobile but that would mean you would need a CSS snippet for each blog.

Another method is to display the featured image outside the header element so it can be displayed as a static (responsive) image but there would not be content above it.

Unfortunately there is no perfect solution here.

Let me know which route you would like to go with.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

Hey Leo,

Would you mind elaborating on this part?
> We could use a switch out the image for mobile but that would mean you would need a CSS snippet for each blog.

What would this do? Replace the existing background image with another that could be resized for mobile? I don’t mind adding css snippets to each post, as long as I know this would accomplish what I’m looking for.

My last resort would be the static image / nav bar redo, because that’s going to be a lot of work and creative thinking.

[Leo]

So try this for the post you’ve linked:

@media (max-width: 768px) {
    body.postid-271 .page-hero {
        background-image: linear-gradient(0deg, rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://MOBILE-SPECIFIC-BACKGROUND-IMAGE-URL)
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

Strange enough, that removes the word altogether on mobile version.

I think I’m just going to templatize a psd file with which I can ensure my featured images are small/centered enough to display on all devices.

[Matt]

Thanks, Leo. Until next time.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts