Images Become Too Large on Mobile Device

Support
#1

I have added some images to my homepage in a 4-column row. They look good on the larger screens, but on the mobile devices they become gigantic. How can I fix this so that they remain proportional/responsive? Thanks.

#2

Hi there,

Thank you for reaching out to us. In responsive design the width of the image depends upon the width of the container, as your 4 column layout is breaking into one for mobile screens that’s why the width of the images expanded. Instead of displaying one column you can display two columns for smaller screens. To do this, add a class to the main section that has images e.g images-section and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .images-section .x-column.x-1-4:nth-child(2n) {
        margin-right: 0;
    }
    .images-section .x-column.x-1-4 {
        width: 48%;
        float: left;
        margin-right: 4%;
    }
}

Hope this helps!

#3

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