Create the Web Adobe | Examples | Responsive Web Design

Create the Web Adobe

Create the Web Adobe across four different breakpoints

View Create the Web Adobe

They do get a little bit lazy for their responsive image technique and just hide some from view (even though they are still downloaded)

<img class="landscape" src="/_/img/events/tablet-landscape2.png"/> <img class="portrait" src="/_/img/events/tablet-portrait2.png"/> <img class="mobile" src="/_/img/events/mobile2.png"/>

Adobe look to have used the 1140 CSS Grid and based the design on a desktop first layout (setting max-width for the media queries rather than the min-width we see for mobile first designs)

Create the Web Adobe Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale = 1.0">

Media Queries

@media screen and (-webkit-min-device-pixel-ratio:0) { }
@media screen and (max-width:1255px) { }
@media screen and (max-width:920px) { }
@media screen and (max-width:877px) { }
@media screen and (max-width: 825px) { }
@media screen and (max-width:768px) { }
@media screen and (max-width:630px) { }
@media screen and (max-width:620px) { }
@media screen and (max-width:576px) { }
@media screen and (max-width:480px) { }
@media screen and (max-width:320px) { }

Plugins used on Create the Web Adobe

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.