Simple responsive page

Question

Can someone tell me if my code is okay so far? I've read quite some resources online for responsive webdesign but it seems like everyone's opinion on best practices is different.

The page I'm working on is this. It's a very simple page with very little content. Right now it works quite well on smaller devices but I want to be sure my approach is correct. In particular, I'm not sure whether my use of the units is correct.

html, body { height: 100% }
body { margin: 0; padding: 0; font-family: 'Lato', sans-serif; background-color: #eee; overflow: hidden;}


/* Content */

.container {
  position: relative;
  height: 80%;
}

img[alt="Pikachu"] {
  width: 198px;
  height: 198px;
  border: 1px solid #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Footer */

footer {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  border-top: 1px solid #cbcbcb;
  height: 20%;
  max-height: 100px;
  min-height: 60px;
  background-color: #eee;
  text-align: center;
}

footer:after {
  content: '';
  border-top: 1px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

footer > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}    

/* Footer Images */

a > img {
  width: 45px;
  vertical-align: middle;
  margin-right: 15px;
}

  img[alt="Twitch"] {
    margin-right: 0;
  }

/* Typography */

h1 {
  line-height: 48px;
  margin: 24px 0;

  color: #fff;
  text-shadow: hsl(15, 84%, 10%) 1px 1px, hsl(15, 84%, 10%) 2px 2px, hsl(15,             84%, 10%) 3px 3px, hsl(15, 84%, 10%) 4px 4px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }

    h1::selection {
      color: hsl(15, 84%, 10%);
      background-color: #fff;
      text-shadow: none;
    }

  p {
    line-height: 24px;
    margin: 24px 0;
  }

Answer 1

Code style consistency

For most of your code, your indentation is good and helps make the style sheets easy to read. However, there are a few places where you did not do that, for example in your html and body sections. Add some line breaks.

This one sticks out like a sore thumb:

text-shadow: hsl(15, 84%, 10%) 1px 1px, hsl(15, 84%, 10%) 2px 2px, hsl(15,             84%, 10%) 3px 3px, hsl(15, 84%, 10%) 4px 4px;

Something like this would read far better:

text-shadow: 
  hsl(15, 84%, 10%) 1px 1px, 
  hsl(15, 84%, 10%) 2px 2px, 
  hsl(15, 84%, 10%) 3px 3px, 
  hsl(15, 84%, 10%) 4px 4px;

---

line-height

The line-height property is not designed for styling the size of a font.

On block level elements, the line-height property specifies the minimum height of line boxes within the element.

What you really want to use is font-size property, which is a used for typesetting.

The font-size CSS property specifies the size of the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the em and ex

  p {
    font-size: 24px;
    margin: 24px 0;
  }

You might look into CSS classes as well. In general for things relating to alignments and positioning (margin, padding, etc.) it is common to use the generic div container along with class names in the CSS and HTML to give you more control and let you spend less time fighting inherited properties from other elements.

p {
  font-size: 24px;
}

div.paragraphSection {
  margin: 24px 0;
}

Then in HTML...

<h1>A Meaningful Header</h1>
<div class="paragraphSection">
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
</div>

Answer 2

body { overflow: hidden; }

You should really never hide overflow on content-based elements. People with small browsers may not see the full content, rendering the site useless to them. overflow: auto is a much better alternative because scrollbars will only be shown if there is overflow. You can tune this even more with overflow-X, overflow-Y.

---

Using purely px based sizing creates very small text when people have large displays. People who browse on a TV will likely find the page to have tiny text and large side margins.

footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

Using absolute positioning on block elements can cause portions of the content to get obscured. To counter this you can add padding or margin to the bottom of the body element.

---

You have odd indentation throughout the entire code. It's better to set a set style for readability.

For instance, instead of this:

h1 {
  line-height: 48px;
  margin: 24px 0;

  color: #fff;
  text-shadow: hsl(15, 84%, 10%) 1px 1px, hsl(15, 84%, 10%) 2px 2px, hsl(15,             84%, 10%) 3px 3px, hsl(15, 84%, 10%) 4px 4px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }

This:

h1 {
  line-height: 48px;
  margin: 24px 0;

  color: #fff;
  text-shadow: hsl(15, 84%, 10%) 1px 1px,
               hsl(15, 84%, 10%) 2px 2px,
               hsl(15, 84%, 10%) 3px 3px,
               hsl(15, 84%, 10%) 4px 4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

---

I'm not sure whether my use of the units is correct.

This looks pretty good. Here is information regarding use of units:

px is the pixels relative to pixel density. The pixel density can affect the size of a pixel with

<meta name="viewport" content="width=device-width, initial-scale=1">

where initial scale is the amount that the pixel density affects the size of a pixel.

Meta tags go in the head element.

em is the measure of one font size on the element, therefore if an element has font-size: 16px one em is 16px. Em is relative to the parent element as well so font-size: 1.5em is 1.5 times the parent's font size.

rem is the measure of one :root element font size. If :root { font-size: 16px } then most elements will base their font size off of a 6px multiplier. Some people use calc() in their :root font size to create a scaling font. This can be done like:

:root { font-size: calc(.5em + .5vw) }

which means that the root font size will be .5 of the browsers default font size plus .5% of the viewport width.

em and rem are usable on more than just the font-size property.

% is a percentage of that parent's measurement for the tag. If the parent has width: 50px and the child has width 50% the child's width will calculate to 25px.

---

Other units you might need are vw, vh, vmin, vmax. These are scaling units, always relative to the viewport's size. These are helpful for scaling elements so that they always fit in the browser window. These values can be negative or greater than 100.

• vw is 1% of the viewport's width. If the viewport is 500px wide then 1vw is 5px, 2vw is 10px and 7vw is 35px.

• vh is 1% of the viewport's height. If the viewport is 243px then 1vh is 2.43px.

• vmin is 1% of the smaller viewport side's length. If the viewport is 624px wide and 437px tall then 1vmin is 4.73px.

• vmax is 1% of the larger viewport side's length. If the viewport is 1242px wide and 804px tall then 1vmax is 12.42px.