I know this has probably been asked a million times. However, the basic explanation of the grid system doesn’t clarify things for me well. By viewing my project you should be able to see my problem. I have 3 rows of projects with headings and images, 3 per row (9 projects total) and I thought they were responsive until I tried viewing them from other computers.
Here is my codepen project: https://codepen.io/BadDuke/pen/PbWBjG
Note that the projects themselves are mostly just silly placeholders for now - especially their images.
How can I fix their responsiveness, and how does the grid system really work? The part I don’t understand is what I need to include to ensure similar display on all devices, and how the numbers for each class relate to the denoted size (eg. lg, xs…). That relationship is probably what confuses me the most.
There are other issues with my project such as the menu being invisible when collapsed, so if you feel like it, please let me know how to fix that or any other issues you find. The main thing for now though is the project rows.
I haven’t added a proper footer to the page yet, but that’s totally besides the point.