Resizing Page Images on Mobile

Hi there,

if you use the core Image Block then it requires some CSS.

1. Select the Image Block, in Advanced > Additional CSS Class(es) field add a custom class eg. image-mobile-small

2. Add this CSS to your site:

@media(max-width: 768px) {
    .image-mobile-small figure {
        max-width: 50%;
    } 
}

In the CSS you can define the max-width of the any image block that you add the image-mobile-small CSS Class to.
Adjust the max-width: 50%; to suit.

Alternatively if you use the GenerateBlocks plugin, it has its own Image Block that has mobile and tablet sizing:

https://docs.generateblocks.com/article/image-overview/

Thanks that works like a dream love Generate Press BTW ;-)

Awesome - glad to hear that :)