Comments on: Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ Brain Food for Web Developers Thu, 19 Dec 2013 23:01:30 +0000 hourly 1 http://wordpress.org/?v=4.2.7 By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-572 Thu, 23 May 2013 16:22:32 +0000 http://www.cheesetoast.co.uk/?p=337#comment-572 HI Vicki,
I’m glad the code is proving helpful. It’s good to hear someone is putting it to good use. Let me know how it works out. I’m always interested to see how these things develop.
Graham

]]>
By: Vicki http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-571 Wed, 22 May 2013 21:47:26 +0000 http://www.cheesetoast.co.uk/?p=337#comment-571 Hi Graham,
Many thanks for the reply, I’ve been working on the code and have to say a big THANK YOU for making something that had me spinning my wheels into something I’m able to work with and understand much better than I was.

The code is so clean, which is something I was finding difficult with other templates I was trying to learn from. I’ve been doing CSS websites for some years but like to keep things clean and not have convoluted code that looks clever but in reality doesn’t do much, so your template has been a joy and it’s working!!
Vicki

]]>
By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-570 Wed, 22 May 2013 15:59:42 +0000 http://www.cheesetoast.co.uk/?p=337#comment-570 Hi Vicki,
At the moment the code is only available via the source code but I’ll work on setting up a link to make downloading the template easier.
Feel free to use and modify it any way you see fit. Let me know how it works out.
Graham

]]>
By: Vicki http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-569 Sat, 18 May 2013 05:06:01 +0000 http://www.cheesetoast.co.uk/?p=337#comment-569 Hi Matt,

I just starting in responsive development and love you nice simple code. I used a template for my first try with the hope of learning from it, but it was so convoluted and this is why I’m here. I’d like to use your template, it’s almost the exact layout other than the three columns I want a left two thirds and a right one third. Do you have somewhere to download the template or just via the source code?
Thanks for such a lovely simple clean template.
Vicki

]]>
By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-454 Thu, 11 Apr 2013 17:18:10 +0000 http://www.cheesetoast.co.uk/?p=337#comment-454 That’s a great question. I haven’t tried equal height columns on this page yet but I’d suggest reading Chris Coyier’s article Fluid Width Equal Height Columns.
I’ll look into it further. Let me know how you get on.

]]>
By: AB http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-453 Thu, 11 Apr 2013 08:37:17 +0000 http://www.cheesetoast.co.uk/?p=337#comment-453 Hi, that’s cool. Problem occurs if I want all three columns to have the same height (height 100%) and still be responsive. Any suggestions?

Thanks

]]>
By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-273 Thu, 01 Nov 2012 15:57:27 +0000 http://www.cheesetoast.co.uk/?p=337#comment-273 Hi Matt,

Thanks for your comment! Feel free to use the template any way you see fit.

A vertical nav bar should scale nicely in the third column. You can use the @media query if you want it to display differently at varying resolutions.

Here’s a list of 100 great CSS menu tutorials (the vertical menus begin at #75).

I hope you find the template useful. Let me know how you get on.

Graham

]]>
By: Matt http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-268 Wed, 31 Oct 2012 23:58:20 +0000 http://www.cheesetoast.co.uk/?p=337#comment-268 Hi Graham, great job!

Can we download your modified template above and use it?

Also, if I put a simple vertical navbar in the right column using an unordered list, will it scale at all three screen resolutions?

What method do you recommend for putting a navbar in this template?

Keep up the good work,

Matt

]]>
By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-83 Thu, 16 Aug 2012 20:01:57 +0000 http://www.cheesetoast.co.uk/?p=337#comment-83 Just read a great article on relative font-sizing that includes ‘px’, ’em’ and the css3 unit ‘rem':
http://snook.ca/archives/html_and_css/font-size-with-rem

]]>
By: Graham http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comment-79 Mon, 06 Aug 2012 16:07:13 +0000 http://www.cheesetoast.co.uk/?p=337#comment-79 Hi Marcos,
Thanks for posting your comment!
You’ve asked a good question.
“px” is an absolute unit of measurement which is based on the screen resolution, whereas “em” is a relative unit of measurement based on the size of the font (where 1em = height of the current font size).
For the purposes of responsive design I used “px” for the media queries (as did Ethan Marcotte in the A List Apart article) since we know the screen resolution of specific devices.
Often “em” is useful for font-sizing (headers) or for margins, as demonstrated in this post by Nick La: 5 Useful CSS Tricks for Responsive Design.
I hope this has been of help to you. Let me know if you have any other questions.
Graham

]]>