Feedback appreciated! https://codepen.io/shigginsdev/full/KMdRzx/
That’s pretty good! I would work on centering the large picture, and then make all of the smaller ones the same height. The link at the bottom could be a bit more obvious (and red!). Bootstrap has classes that will make all of this simple.
Thanks for the feedback. So, do you think I should hardcode the height value from the small images (i.e. height: 200px)? Does that affect how they resize on mobile devices? I really struggled with the images and I think they look messy but I’m not sure the best way to fix that AND have it responsive. If you know of a link to any articles on this subject (i.e. what’s best practice here) I would be very interested. Thanks again for your comments.
CSS allows you to define a max-height and max-width value. Absolute sizes are generally not a good idea, so you’re definitely asking the right questions there. I’d start with a max-height equal to the shortest picture. Bootstrap also has some classes that you might want to try.
Made your suggested changes except the large image which is already centered. Made a HUGE difference!! Thanks so much.
Right on, it looks great! The large image does look fine on smaller screens, but when the screen width exceeds the image width, there’s some white space at the right side of the screen. I only see the issue when I’m connected to my large monitor (2560x1440), so I’ll take some screenshots when I’m back at my desk.
I really appreciate you helping me on this…
I can center the image. However, I’ve applied the class img-responsive which according to Bootstrap should
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
So, shouldn’t the image always be the width of the screen?
It won’t stretch any wider than the image’s own width, but if you applied img-responsive, it should at least put equal space on both sides.
Weird. I’ve centered the image but I don’t have a gigantic monitor to test. You mind taking one more look for me?
Nice and centered now 