Using a different image for a block dependent on screen size

  • Adam

    (@ahardy42)


    2 years ago

    I have a large image that I am quite emotionally attached to, which I use as my landing page headline image. Actually I am using Twenty Twenty and for various reasons it is much easier to place the image in a block on the page rather than try to set it as the page’s Featured Image.

    Now I’m facing a problem that the image shrinks too much on mobiles and isn’t good. I’d like to show a cropped version of the image on mobiles and tablets.

    I’ve searched and not found any plugin that will do this, so it looks like it’ll have to be CSS – but how would I specify the different images? I can only think of using background-image but then the HTML element would have no height. I figure this would be the best media query:

    @media (max-width: 768px) {
	.my-image {
		something: ???;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.my-image {
		something: ???;
	}
}

@media (min-width: 1025px) {
	.my-image {
		something: ???;
	}
}
    • This topic was modified 2 years ago by Adam.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @ahardy42 – rather than custom CSS, you might like to try this plugin instead:

    https://www.ads-software.com/plugins/block-visibility/

    It should be easier to create and maintain in the future. Let me know how it goes!

    Thread Starter Adam

    (@ahardy42)

    Hi Kathryn, thanks so much for the tip.

    I wonder if you came across the problem on mobile devices and tablets – if someone reading my website turns their screen, it flips from portrait to landscape or the other way around. So I’m trying to work out what the best image proportion would be.

    If I make it too portrait for mobile devices, it will look terrible if the user turns the phone to landscape orientation.

    Moderator Kathryn Presner

    (@zoonini)

    Hi @ahardy42 – I don’t think if there’s a one-size-fits-all solution for this sort of thing.

    If I make it too portrait for mobile devices, it will look terrible if the user turns the phone to landscape orientation.

    It might help me give you better suggestions if you could provide links to a couple of specific posts or pages where you’re not happy with the way the image(s) appear in a specific orientation.

    Generally, image blocks should adapt well to any screen size or orientation, so I’d love to see a couple of examples you’re running into so I can better understand the problem. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using a different image for a block dependent on screen size’ is closed to new replies.