Sense of Style

Why Create This

I wanted to get a sense of how different sizes looked on different devices. While you could do this by using the developer console, I don't think the developer console beats actually using the device that you are targeting to see how certain styles look.

Style

Edit the code editor below and see the effect that it has on the red square below the code editor. (This square is a <div> element that is inside a block <div> element - style it anyway you want to see the effect on different devices.)

Notes on Style

Some Notes on Styling Images for Devices

  • For comments, the max-height of the images on desktop should be 200px (or less (200-150px looks about right)). The max-width should be around 400px.
  • If you want to do nested comments, all of which are nested approx. 50 px, then this would allow you to have 8 nested comments before having to show a comment page.