Icons/Images in Content Not Responsive on Mobile

[amshespence]

Hello - I am having trouble figuring out what I have to do to make my images/icons responsive for mobile. I need them to shrink down to a “manageable” size for mobile and position so it’s two on top, two on bottom.

[lely]

Hi Amy,

Please inspect the section with the images. Go to Customize Tab > Element CSS. Try adding the following:

@media(max-width:480px){ /*Media query for mobile*/
    $el.x-section .x-1-4 {
        width:48%;
        display:inline-block;
        margin-right:0;
        float:left;
        margin-bottom:2em;
        text-align:center;
    }
     $el.x-section .x-1-4:nth-child(odd) {
        margin-right: 4%;

        
    }
    .$el.x-section .x-1-4 img{
        max-width: 120px; /*Adjust this to your preferred icon size on mobile*/
    }

}

That should display it like this:

Hope this helps.

[amshespence]

@Lely

@media(max-width:480px){ /Media query for mobile/
$el.x-section .x-1-4 {
width:48%;
display:inline-block;
margin-right:0;
float:left;
margin-bottom:2em;
text-align:center;
}
$el.x-section .x-1-4:nth-child(odd) {
margin-right: 4%;

}
.$el.x-section .x-1-4 img{
    max-width: 120px; /*Adjust this to your preferred icon size on mobile*/
}

}

Worked perfectly! Thanks so much!

[Prasant]

You are most welcome.