# Tribute Page: Norman Rockwell

**URL:** <https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094>\
**Category:** I Built This\
**Created:** [June 8, 2016, 5:41pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094 "2016-06-08T17:41:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![shigginsdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shigginsdev/32/164337_2.png) [@shigginsdev](https://forum.freecodecamp.org/u/shigginsdev)\
**Post date:** [June 8, 2016, 5:41pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/1 "2016-06-08T17:41:01Z")

</div>

Feedback appreciated! [https://codepen.io/shigginsdev/full/KMdRzx/](https://codepen.io/shigginsdev/full/KMdRzx/)

> **[KMdRzx](https://codepen.io/shigginsdev/full/KMdRzx/)**
>
> ...

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 1:33pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/2 "2016-06-14T13:33:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shigginsdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shigginsdev/32/164337_2.png) [@shigginsdev](https://forum.freecodecamp.org/u/shigginsdev)\
**Post date:** [June 14, 2016, 3:29pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/3 "2016-06-14T15:29:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 3:34pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/4 "2016-06-14T15:34:40Z")

</div>

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](http://getbootstrap.com/css/#images) that you might want to try.

---

<div class="post-metadata">

**Author:** ![shigginsdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shigginsdev/32/164337_2.png) [@shigginsdev](https://forum.freecodecamp.org/u/shigginsdev)\
**Post date:** [June 14, 2016, 5:55pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/5 "2016-06-14T17:55:31Z")

</div>

Made your suggested changes except the large image which is already centered. Made a HUGE difference!! Thanks so much.

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 6:47pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/6 "2016-06-14T18:47:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shigginsdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shigginsdev/32/164337_2.png) [@shigginsdev](https://forum.freecodecamp.org/u/shigginsdev)\
**Post date:** [June 14, 2016, 9:10pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/7 "2016-06-14T21:10:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 9:18pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/8 "2016-06-14T21:18:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 9:35pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/9 "2016-06-14T21:35:10Z")

</div>

Still happening, unfortunately.

 ![](https://global.discourse-cdn.com/freecodecamp/original/2X/4/48800a49b47086faf82557d8197f205d4bec6b5a.jpg)

---

<div class="post-metadata">

**Author:** ![shigginsdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shigginsdev/32/164337_2.png) [@shigginsdev](https://forum.freecodecamp.org/u/shigginsdev)\
**Post date:** [June 14, 2016, 9:52pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/10 "2016-06-14T21:52:09Z")

</div>

Weird. I’ve centered the image but I don’t have a gigantic monitor to test. You mind taking one more look for me?

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [June 14, 2016, 9:59pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/11 "2016-06-14T21:59:16Z")

</div>

Nice and centered now 😄

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:11pm UTC](https://forum.freecodecamp.org/t/tribute-page-norman-rockwell/9094/12 "2021-06-01T18:11:49Z")

</div>


