Mobile layout of the “In Response” template updated

Post 16 of 262

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

, , ,

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.

AdamAugust 15, 2013 at 12:52Reply

Are your themes wordpress compatible? I’m thinking to use one for my site http://howbees.com.

Bernhard TrappeNovember 19, 2013 at 17:49Reply

It is not possible to use ul/li lists in this template which display for example disk list-items. All list-items are suppressed.

Bernhard TrappeNovember 19, 2013 at 18:02Reply

Nachtrag: list-style:inside; geht. Nur outside verschwindet das list-item.

Bernhard TrappeNovember 20, 2013 at 12:13Reply

Solution: you must give ul a style like this:
margin-left with a min of 15px.

Menu