Question: how to resize images to fit cols using bootstrap

This is what I want my final product to look like, however when I insert my images into the cols using bootstrap, they appear all different sizes and do not fit inside the divs/cols I have created. How can I get the images in the second, third, and fourth columns of icons to take up half the container (1 of 2 columns) and resize to fit that column as the screen size changes?

This is the original mock up:

this is my current code:
https : // codepen. io/ caroline-mcardle /pen / Wmxxba
(delete spaces to access page)
Instead of appearing next to eachother in their rows, the images/text are stacking and taking up huge amounts of space.

I think some of the problem may stem from your fonts not being responsive.

Not that you have to use Bootstrap to correct this, but they do have an article that talks about this: https://getbootstrap.com/docs/4.0/content/typography/#responsive-typography

One thing I like to do when I am struggling with content fitting into the right spacing is to temporarily add a border around all items (css selector for all items is: *)

I also played with a few other things, there are still some obvious issues that need correcting, but here is what I started playing with:
https://codepen.io/imitating/pen/vPKKmW?editors=1100

1 Like

Thank you so much ! that was very helpful.

1 Like