You're viewing old version number 1. - Current version

1 min

Test page for CSS media queries and min-width

This is my favorite website. I visit it almost every day. It’s not responsive. It’s not optimized for iPhone. It looks blurry on a Retina display. It doesn’t use the latest HTML5/CSS3 framework. It doesn’t have a thoughtful vertical rhythm. The fonts are nothing special. It is neither skeumorphic nor flat. It doesn’t have its own favicon. It doesn’t have a native app or Twitter or Instagram. It doesn’t use AJAX or SCRUM or node.js or Sinatra. It doesn’t have an API or an RSS feed or VC funding. It hasn’t been featured on a prominent tech blog or won an award.

It tells me the soups of the day.

Freely distributed information that’s relevant to the person reading it. That’s web design.


created a "testcontent" CSS id style, used in the above block of text.

/* testing for resizing desktop/laptop browser */
# testcontent {
font-size: .7em;
background: grey;
}

@media all and (min-width: 200px) {
# testcontent {
font-size: .8em;
background: red;
}
}

@media all and (min-width: 400px) {
# testcontent {
font-size: .9em;
background: orange;
}
}

@media all and (min-width: 600px) {
# testcontent {
font-size: 1em;
background: yellow;
}
}

@media all and (min-width: 800px) {
# testcontent {
font-size: 1.05em;
background: green;
}
}

@media all and (min-width: 1000px) {
# testcontent {
font-size: 1.1em;
background: blue;
}
}

From JR's : articles
227 words - 1470 chars - 1 min read
created on
updated on - #
source - versions



A     A     A     A     A

© 2013-2017 JotHut - Online notebook

current date: Dec 23, 2024 - 6:17 a.m. EST