Responsive Web Design Patterns
Tiny tweaks
Tiny tweaks simply makes small changes to the layout, such as adjusting font size, resizing images or moving content around in very minor ways.
Tiny tweaks simply makes small changes to the layout, such as adjusting font size, resizing images or moving content around in very minor ways.
It works well on single column layouts such as one page linear websites, text heavy articles.
As its name implies, little changes with this sample as the screen size changes. As the screen width gets larger, so do the font size and padding.
Sites using this pattern include:
Try it
.c1 {
padding: 10px;
width: 100%;
}
@media (min-width: 500px) {
.c1 {
padding: 20px;
font-size: 1.5em;
}
}
@media (min-width: 800px) {
.c1 {
padding: 40px;
font-size: 2em;
}
}
View full sample
Updated on 2014-04-30
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .