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.

It works well on single column layouts such as one page linear websites, text heavy articles.

Try it

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:

    .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

Authors

Pete LePage

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.