[Support request] Issue with picture in container

[Karsten]

Hey Friends,

please help.

My picture on my homepage is 500×500 pxs. which is ok. But on mobile view I want the picture to be much smaller like 250×250 pxs. Unfortunately when I make the changes and save, suddenly the picture on desktop view is also 250×250 pxs. I don’t understand this behaviour.

Please advise. Thank you

Best, Karsten

[Ying]

Hi Karsten,

Unfortunately when I make the changes and save, suddenly the picture on desktop view is also 250×250 pxs.

How did you make the changes? I don’t think WP image block has the option to set different image size for a different screen width.

[Karsten]

Hi Ying, when I reduce the size on mobile view to 250pxs, then on desktop view the picture is also 250 pcs as you can see here. But this is not what I want. On desktop view I would like to see 500 pcx.

Please help. Thank you

[Ying]

You can set the image to 500px in the image block, then add this CSS for mobile:

@media (max-width: 768px) {
    .gb-container.gb-container-c1123433 img {
        height: 250px;
        width: 250px;
     }
}

[Karsten]

Unfortunately the issue is picture has still the same size on desktop and mobile.

[Ying]

As I can see the mobile image has already been set to 250px, can you clear your device browser cache?

You’ll also need to set the image to align center instead ofalign rightfor the image block.

[Author]

Posts