Portfolio Project Thumbnail Images Issues

I saw on W3C that when creating thumbnails images in a 3 x col-xs-4, it will display 3 in a row one next to the other. Then when the view is changed to mobile, the images automatically stack one on top of another.

I tried to replicate this in my portfolio project but to no avail. Could someone please have a look at my code and let me know if there is something I missed.



Try using col-sm-6 instead of xs

1 Like

Okay, I just did some testing on your site and I think the problem is in your “col-xs-6” classes. Bootstrap has four different sizes of screen it adjusts to, and xs indicates the smallest screen. So when you give an element a class of “col-xs-6”, you are saying “I want this to take up six columns on the smallest screen”. Try using “col-sm-6” instead.

The bootstrap website has some good examples of how the grid system works- here. Hopefully this will help clear up the different size classes- resize your screen to see how it works.

Thank you both! I can’t believe it is something as small as this… It works now.