[Resolved] Featured Image never responsive on Mellow theme

Home Forums Support Featured Image never responsive on Mellow theme

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1324277
    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!

    #1324332
    Leo
    Staff
    Customer Support

    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.

    #1324352
    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.

    #1324357
    Leo
    Staff
    Customer Support

    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/

    #1324367
    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.

    #1324378
    Matt

    Thanks, Leo. Until next time.

    #1325378
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.