Bootstrap Clients logo grid

[therockstar]

Good day everyone.

I am having trouble working on multiple clients logos grid in responsive design.

On desktop clients, logos look fine: http://imgur.com/at3vOum However when I tested on IPhone 6 using Chrome “Responsive Web Design Tester” the result is terrible http://imgur.com/W4wJiYM
But I don’t understand why last row logos stack up properly.

Here is my code.

https://codeshare.io/GkpZL3

Cheers!

[therockstar]

Any help on this?

[Beverleyh]

I’m not familiar with the code sharing platform you’re using but it looks like there’s only HTML? Could just be me though or possibly the limitations of the service on mobile? (I do much of my free-time browsing on mobile)

You might get more input if you provide a working demo in CodePen. We’d need all the pertinent CSS and a few sample logos to see the undesirable behaviour of the issue you describe. It would also be helpful if you told us how you ultimately want the images to behave. (Undesirable behaviour vs desirable behaviour)

Unfortunately we can’t troubleshoot from images and HTML alone.

[therockstar]

@Beverleyh Thank you for reply. I will upload the page in test server for a demo.

Cheers!

[Beverleyh]

No need for a test server – just the pertinent markup, CSS and a few sample images in CodePen in fine. We don’t need to see your whole codebase – only the parts relevant to this image problem you describe.

[rkieru]

Just in consideration of the HTML we’ve seen – I do have a few questions.

• Why are you specifying a width in <img> but also using .img-responsive? These might be conflicting with one another (the class adds a max-width declaration). Consider that at col-xs each image is still FORCED to be 120px wide (based on your width), whether that is the size of the column or not.

• Why are your image grids wrapped within a column within a row? That seems superfluous to what you’re trying to achieve.

[Author]

Posts