Mobile layout of the “In Response” template updated

Post 16 of 262

May 15, 2013Andreas ViklundBuild9 comments

The new In Response CSS template features a simple media query that makes the layout responsive, scaling the fixed-width and multi-column grid layout down to a full-width and single-column layout on mobile devices. I mentioned this in the template release description, but I didn’t upload any screenshot of the mobile layout at the time of the release.

Today I have updated the template to version 1.1 with minor CSS changes to make the mobile layout look a bit better. Here are screenshots of the In Response template, as it appears in Safari on iOS and Internet Explorer on Windows Phone 8:

Changes made in version 1.1

Reduced navigation menu button sizes and margins
Reduced h1 element line height

Preview or download the “In Response” template

Download Preview

in response, mobile, responsive, templates

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

9 comments:

SitebeeMay 23, 2013 at 12:34Reply

Great template, nice friendly layout! the only thing I do not personally like too much is the menu in responsive mode. If you have lots of pages, the menu will clutter the page up.

Overall I like it, great work as always.

lifespiritJune 12, 2013 at 04:36Reply

i like your work… thanks for sharing it with us. I’m a newbie and I would like some advice. I don’t know where to start… I have a bunch of html/css/js books. and i think it’s too much time… i really like web design and web dev but i dont like reading 600 pages

NormanJuly 4, 2013 at 02:15Reply

Very nice template. I like it. Thank very much you for your work. Just one question: The stylefile contains definitions for the id #footer but the html file does not have such a id=”footer” container. Also some images (insidebg, insidebg2, insidebg2-light, insidebg-light) are mentioned but missing. Is this just for “historical reasons”? Greatings from Leipzig, Germany.

Andre RaymondJuly 28, 2013 at 21:56Reply

Ok very clean, you have however remnants of XHTML1.0, />, not needed in HTML5.
Also css images missing insidebg.jpg, insidebg2.jpg, insidebg2-light.jpg, insidebg-light.jpg
Any chance making these available ?

speedbirdAugust 6, 2013 at 14:22Reply

@lifespirit
Life is full of compromises and if you really want to do anything well you have to put in the time. Read those books you have – or forget it and play on Facebook, Twitter et al.