The images side by side each other aren't centered horizontally when viewed on a mobile

[core365]

Hi, I’ve put some logos side by side each other (not separated by columns) and they all look fine and how I want them when viewed on a desktop. When you view it on a mobile, the logos aren’t centered horizontally and I have no idea how to sort it, as I’ve already set the row to center align the contents!

Hope you can help!

I’ve included a screen grab to show you. I’ll put the URL in a secure note as it’s being built on a temporary link.

Thanks!

[nabeel]

Hi @core365,

Thank you for reaching out to us. To align images in smaller screens, first assign your section a class that has all the logos e.g logo-section and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .x-section.logo-section .x-image {
        width: 49%;
        margin-left: 0;
        margin-right: 0
    }

    .x-section.logo-section .x-image img {
        width: 60%;
        margin: 0 auto;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[core365]

Hi @Nabeel,

That’s perfect, thank you!

[jade]

You’re welcome, @core365.