Image larger on mobile only

could I ask for some help to increase an image on mobile only.
On the desktop view this is what I see

Desktop

Mobile

the mobile sub text is too tiny to read so hoping to zoom in on the image. I tried the following code and it is right in size, but not centered. Hoping this is just a tweak or someone has some other knowledge to help.

@media screen and (max-width: 767px) {
.images-section {
margin-right: 0;
}
.images-section {
width: 160%;
float: center;
}
}

Hey @headmetal,

Please add this code to the Image element’s Element CSS:

@media (max-width: 480px) {
    $el.x-image {
        overflow: hidden;
    }

    $el.x-image img {
        transform: scale(1.5);
    }
}

Hope this helps.

this worked great. Thank you for the assistance and explanation

You’re most welcome, @headmetal.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.