[Resolved] Image resize for mobile devices

[Rick]

On my landing page, I have a portrait image in the content area that uses the default WordPress alignright class:
class="alignright size-medium wp-image-157"
However, this image does not resize for mobile devices. This is problematic for smaller viewports. Is there a CSS solution?

[David]

Hi Rick,

there a couple of options, you can either set two images one for mobile (small) and one for desktop (medium). And use the hide on classes listed here for each image accordingly.

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Or you can attach your own class to the image, which we can adjust that max width on mobile like so:

@media (max-width: 768px) {
    .my-class {
        max-width: 120px;
    }
}

[Rick]

Thanks, that works well when I set max-width: 50%

[David]

That’s great. Glad i could help

[Author]

Posts