# RWD Tribute page

**URL:** <https://forum.freecodecamp.org/t/rwd-tribute-page/402142>\
**Category:** I Built This\
**Created:** [June 11, 2020, 4:29pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142 "2020-06-11T16:29:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jspiderhand](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jspiderhand/32/132743_2.png) [@Jspiderhand](https://forum.freecodecamp.org/u/Jspiderhand)\
**Post date:** [June 11, 2020, 4:29pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/1 "2020-06-11T16:29:29Z")

</div>

Hi everyone!

I hope you’re having a great day. If anyone is interested, I would like to receive feedback on my Tribute page project at the link below:

[https://codepen.io/jspiderhand/pen/JjoeLVj](https://codepen.io/jspiderhand/pen/JjoeLVj)

I look forward to hearing from you.

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [June 11, 2020, 5:54pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/2 "2020-06-11T17:54:37Z")

</div>

Do not use view port units (vw/vh) for font sizes. This is an accessibility issue. The user should be able to manually control the font size but using view port units denies the user this functionality. Please use ‘em’ for font size.

---

<div class="post-metadata">

**Author:** ![Jspiderhand](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jspiderhand/32/132743_2.png) [@Jspiderhand](https://forum.freecodecamp.org/u/Jspiderhand)\
**Post date:** [June 11, 2020, 6:14pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/3 "2020-06-11T18:14:14Z")

</div>

Interesting. Where did you get the info about view port units causing an accessibility issue for fonts? Can you post a link?

Thank you for your feedback

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [June 11, 2020, 6:49pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/4 "2020-06-11T18:49:10Z")

</div>

Narrow your browser as far as it will go. Can you still read the text on the page? Even if you can, I think you will have to admit that there are probably a lot of people who can’t. Yes, you can widen the browser window to make the font size bigger, but what if someone can’t widen it big enough for their needs?

Browsers/browser extensions allow people to manually increase the text size on the page, but that doesn’t work when you use vw for the font size. If you want everyone to be able to read your page then you need to allow them to control the font size. That is the accessibility issue here.

If you don’t know how to manually increase the text size, using Firefox, go to the ‘View-\>Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size. It won’t work on your page as it is now since you are using vw units for the font size. Other browsers have extensions you can add to enable text only increase.

Bottom line, if you want your page to be truly accessible then it needs to allow the user to control the font size and it should be responsive to changes in the font size.

If you want a link, see:

[https://www.ada.gov/pcatoolkit/chap5toolkit.htm](https://www.ada.gov/pcatoolkit/chap5toolkit.htm)

See section B. 1. c. in particular.

See also:

[https://www.w3.org/TR/WCAG21/#resize-text](https://www.w3.org/TR/WCAG21/#resize-text)

---

<div class="post-metadata">

**Author:** ![PVN](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@PVN](https://forum.freecodecamp.org/u/PVN)\
**Post date:** [June 15, 2020, 5:54pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/5 "2020-06-15T17:54:26Z")

</div>

Good work.Different layout and styling.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [June 17, 2020, 10:50pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/6 "2020-06-17T22:50:23Z")

</div>

Page looks good @Jspiderhand. Some things to revisit;

- Don’t use `<br>` to force line breaks or spacing. That’s what CSS is for.
- It’s not a good idea to skip header levels. They should be in order.
  - You have `h1`, `h3`, `h2`.

> **[: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)**
>
> The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

---

<div class="post-metadata">

**Author:** ![Jspiderhand](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jspiderhand/32/132743_2.png) [@Jspiderhand](https://forum.freecodecamp.org/u/Jspiderhand)\
**Post date:** [June 18, 2020, 2:40pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/7 "2020-06-18T14:40:44Z")

</div>

@Roma Thank you for your feedback. I’ve reviewed the elements you pointed out and believe I’ve made the necessary changes if you’d like to review them.

---

<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, 1:15pm UTC](https://forum.freecodecamp.org/t/rwd-tribute-page/402142/8 "2021-06-01T13:15:52Z")

</div>


