Hello everyone. Here’s my Tribute Page : https://codepen.io/Verrmundr/full/LLpBXZ/
Its not complete, i didnt stylize it enough so dont judge me on that , yet 
. The problem is in the “Published books” section.
I’ve TRIED placing DIVS inside a 12 column row and displaying them in “inline-block” way but it doesn’t work. I dont know exactly WHAT i’m doing but i’m just puuushing the limits. Would you be so kind to point what’s wrong and why the divs dont align well?
thank you in advance.
Hey Lumiluminous,
you didn’t specifiy a width, so all of your inlined divs are taking up whichever space they need.
For example (so that this makes more sense): If you’d like to have 3 divs next to each other, you’d have to specify a width of 33.3333%. Or if you’d like to have 4 divs next to each other, your icon-class needs to have a width of 25% and so on …
Hope this will help you.
Have a nice (coding) day!
emcewe
It worked, thank you. I still have a couple of questions , how can i make it responsive and why are they not align properly? The height is different, how can i fix that? Also, how can i set the img to extend to full width inside the div?.
It’s not responsive because you are setting one responsive column (col-md-12) and then filling it up with non-responsive divs.
12 columns divided by 4 books equals 3 columns per book.
so for each book <div class=“col-xs-3 col-md-3”) is how to start. The images will fill the div, width-wise, up to the size of the image.
Also, you’ve got Bootstrap 4 included, instead of the version we use here.
https://forum.freecodecamp.com/t/using-bootstrap-with-codepen/110940
good luck!
I set it back to the old version of bootstrap , changed some classes to fix the img width in the first container but i’m still having a problem with the columns. I’ve put every book inside a col-xs-3 and col-md-3 div but they keep appearing inside each other. What am i doing wrong? Can you point it out?
Just seeing your post now, your Tribute Page looks great on my iPad, portrait and landscape. Yay!
Yes, i’ve been correcting my code the past few days. I did some corrections in the books section. I was using bootsrap 4 classes and i had inserted the bootstrap 3.3.7 version, so classes like img-fluid didn’t worked that well. I’ replaced them with img-responsive. I was told that my first image was smaller than my column width size so the img-responsive didnt work that well, its as bootstrap didnt care as long as it was smaller that the max-width, so i applied width:100%; in figure>img. Now what is left to do is change the size of the images without breaking the spacing between the divs. I want every image to have the same height and width and spacing between them.
I really like the fact that you took time to test it on different views. Also, thank you for replying back, any feedback is valuable!