Book Image

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
Book Image

jQuery for Designers Beginner's Guide Second Edition

By: Natalie Maclees

Overview of this book

Table of Contents (21 chapters)
jQuery for Designers Beginner's Guide Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – creating a tiled layout with different width items


Perform the following steps to take the tiled layout we've already created and to make it work for items with different widths:

  1. First, we need to create items of different widths. A few of the items in the layout have images that are landscape rather than portrait orientation, which means those items appear particularly small in the layout. Let's make those the width of two columns so they stand out more. Go back to the HTML file for the list of items and add a class of w2 to each item that will now be two columns wide:

    <li class="cat w2">
      <figure>
        <img src="images/himalayan.jpg">
        <figcaption>
          <h2>Himalayan</h2>
        </figcaption>
      </figure>
      <div class="info">
        ...
      </div>
    </li>
  2. Next, open your styles.css file and style these items with a wider width. As all items are of full width at narrow screen sizes, we only have to add the new width...