Whitney Houston Tribute Page - Bootstrap advice and JQuery solution

Whitney Houston Tribute Page - Bootstrap advice and JQuery solution
0

#1

I finished my Tribute Page about Whitney Houston.: [my tribute page] (https://codepen.io/somespace/full/NRAoYP/)

I do have some questions for more other developers, perhaps more experienced then me.

THUMBNAILS with EQUAL HEIGHT
I have three thumbnails with pictures and descriptive text bellow. They are displayed in a same size on xs to md devices, but on biggest screens medium and large, the three thumbnails do not have the same size. My heck was to measure the height of the longest one and then assign minimal-height property with the value from the heighest to all of them - it only aplies on small to medium devices, because i used media queries. But, is there any other, less complicated way of doing it with Bootstrap 3 ? I know i can use JQuery or JavaScript solution for it, but rather than relaying on JS turned on clients browser for visual enhancement i would like to have some CSS solution. I found out, that with Bootstrap 4 you can assign the special class to the row div to make all elements in it equally high, but codepen allows only adding Bootstrap 3. In a real world, i would use Bootstrap 4 solution and media queries, perhaps if no other trick is possible. Maybe i can tweak the height by using less variables, but i did not find out how to use less in codepen, so i left it as it is now.

JQUERY problem, change in animating stuff

As you might notice, when you scroll through my webpage, the effect animate to opacity 1 (kinda like fadeIn) is used to display hidden pictures. If you look throuh my code, you can see many nested if statements that specificaly apply the animation and different manually added delay to handle animations with different style on each layout. I wonder if some simpler method to handle delay for animations exist, when for example in large screen view i scroll over last three image thumbnails, they are animated with delay after each other. I did not find simpler coding solution which would not involve more manual adding code if i had for example more pictures bellow to display in previously mentioned desired order.

DESIGN AND USER FRIENDLINESS
I would very like to hear your point of view on design of my page, whether it does contain too little / too many elements, what is missing and what is useless. Designing user friendly webpages is very important skill for me to know, so I am open to any advice on that.


#2

Page looks great. Just entering a height value in CSS is enough to fix the thumbnails, which is about as straightforward a solution as you could ask for.

Time to move on! Plenty more challenges to conquer.