Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] Section image sizing

Home Forums Support [Support request] Section image sizing

Home Forums Support Section image sizing

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #511104
    Paul

    I’m using a section purely for an image that’s the same width as the content below it (text paragraphs), which is fine but when it resizes on mobile the height is reduced to much. The image is 1020 * 250 which automatically to 260 * 63 on a 320px screen width.

    Is there a method I can use so the image has greater height on smaller screens? I’ve tried using a custom image size with an image css class, disabling the built scrset rezising, and a couple of responsive image plugins to no effect.

    I noticed featured images also have little height on smaller screens but I’ve since stopped using them now I’ve setup page headers.

    Any advice would be appreciated.

    Thanks,
    Paul.

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #511293
    Leo
    Staff
    Customer Support

    Hi Paul,

    Static images are scaled up/down by ratio so if we restrict the either the height or width, the image would lose its ratio.

    What about having two images and use these classes to show one or the other?
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    #511304
    Paul

    Ok thanks, I’ll have a look. I imagine the option you’ve suggested would work but it’s not something a client would be able to do without my help. I might have to accept images in body content isn’t an option.

    #511460
    Leo
    Staff
    Customer Support

    If you want the height to stay unchanged then using background image might be an option? But of course background image aren’t responsive by nature so it will be cropped.

    #511571
    Paul

    The original suggestion looks good to me. Would be nice for consistency if I could make these seperate images the same height on all screen sizes as those Show Posts displays – featured images.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.