O'Reilly logo

Mobile First Design with HTML5 and CSS3 by Jason Gonzalez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The gallery detail

So, let's have a look at the content we want on this page and how to strategize the layouts for different devices.

The main things, I think, most people want to see in a portfolio of any kind are a few key images and some lengthier, detailed text describing images.

Here is the layout we will need for mobile screens:

The gallery detail

The smaller squares, shown in the screenshot, will be the thumbnails that users can touch or click on to show the larger image above the smaller images on the page. The first thumbnail will be the default image that will be displayed when the Gallery page loads. We will also highlight the thumbnail that is currently active, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required