Footer: resize images to fit 100% screen width in mobile (responsive)

[educainventions]

My best solution so far, has been setting the width of the images manually to fit the most normal mobile screens:

However, if the screen of the mobile is smaller, the logos will be cut.

Furthermore, in desktop the logos are shown too small:

I’d say a better solution would be to set a fixed width for desktop. Then, reduce the size of all images in a proportional way in mobile.

I’ve been playing with flex, but I’ve not been able to achieve that myself (I got weird results instead, like only the first image is reduced)

So how to achieve that?

Thanks!!!

Carlos

[prakash_s]

Hi Carlos,

You can display two images in each row in the mobile view. Please follow the following steps.
Add four container under the current one.

Then add single images to each container.

Now hide these containers for larger devices from Container -> Customize -> Hide during breakpoints.

And the first one for smaller devices.

Hope it helps.
Thanks

[educainventions]

Sorry, we have logos in a lot of languages. So that solution would be very hard to maintain.

So that’s why I’m asking for a responsive solution.

Isn’t there a way to make it responsive??

I think flex allows to do very cool things

But I don’t find the way in this case

[nabeel]

Hey @educainventions,

To keep the images responsive, you should set the image Width to 100% and define Max Width instead for each of your image elements (see screenshot)

Let us know how this goes!

[educainventions]

That solution makes a lot of sense. It’s not working though. Let me show you:

I’ve configured all images like this:

However, in the Chrome inspector, it doesn’t seem the configuration has been applied (I’ve cleared cache, etc.):

It’s so weird!

Thanks so much for your support
Carlos

[prakash_s]

Hello @educainventions

To help you better with your concern please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks