Comments on: Change Your Thesis Site to a Fluid Layout

By: Beth

Beth — Sat, 14 Jan 2012 05:51:13 +0000

Padding option worked ^^ Thanks for the tip. I’m a codeless wp builder and help such as these keeps me in business.

By: RYAN

RYAN — Wed, 09 Mar 2011 21:14:26 +0000

Do you happen to have any code for a fluid custom header with thesis? Having a terrible time sizing this correctly for different resolutions! thank you !

By: Talkblogger

Talkblogger — Sat, 11 Dec 2010 06:49:58 +0000

Thanks for the quick tutorial Matt. I have been facing this issue with my site in recent times and I think this code snippet would enhance my readers’ experience.

By: Alan Vallis

Alan Vallis — Tue, 07 Dec 2010 16:29:26 +0000

I agree about the maximum width issue. Sadly, many visitors to your site won’t have enough computer savvy to realise that they can resize the window. Many others also have their browser window permanently maximized.

For readers who are not familiar with CSS, just change the first line of the Matt’s code to this:
#container { width: 100%; max-width:1250px;}
1250 pixels seems to me to be about the right maximum for comfortable reading without having to scan. What do others think?

And of course you do you can add:
min-width:400px;
or whatever if that is your heart’s desire.

By: Rob McCance

Rob McCance — Mon, 01 Nov 2010 00:33:19 +0000

That’s what I was thinking before I made it to the bottom of the article. Need minimums, at a minimum.

Ha ha!

By: 9 Blogs to Help You Master the Thesis WordPress Theme

9 Blogs to Help You Master the Thesis WordPress Theme — Tue, 07 Sep 2010 20:17:40 +0000

[...] posts: Change Your Thesis Site to a Fluid Layout Enable WordPress 3.0 Features for the Thesis Theme Starter PSD and Custom [...]

By: Dr. Lawrence Kindo

Dr. Lawrence Kindo — Thu, 12 Aug 2010 19:07:48 +0000

I have been looking for a tutorial on customizing thesis skins with this functionality. I have been trying to customize my Thesis Skin and the results are good, but it shows poorly on most small screen computers in low resolution. I hope this solution works its wonders on my site.

By: Jon Brown

Jon Brown — Fri, 02 Jul 2010 08:58:37 +0000

Matt – Thanks for this, it’s very clean and simple.

Krista Good point! I also appreciate how W3C’s fluid layout magically switches to a mobile site layout if it get really really narrow. I’ve been meaning to look into that very feature of fluid layouts myself lately… haven’t yet, but soon. Assuming it’s just a different style sheet altogether, although I’d assume it was called via JScript, but it looks to be in the header…
.-= Jon Brown´s last blog ..Hello world- =-.

By: Tweets that mention Change Your Thesis Site to a Fluid Layout -- Topsy.com

Tweets that mention Change Your Thesis Site to a Fluid Layout -- Topsy.com — Sun, 13 Jun 2010 08:10:20 +0000

[...] This post was mentioned on Twitter by Matt Hodder, Dave Krug. Dave Krug said: RT @matthodder: Change Your Thesis Site to a Fluid Layout http://bit.ly/avSoWn #thesiswp [...]

By: kristarella

kristarella — Fri, 11 Jun 2010 02:35:30 +0000

Smooth moves. That didn’t take as much CSS as I thought it would.

For readability’s sake it’s usually a good idea to have min and max widths for fluid content, otherwise it can get a little ridiculous, but this is a great start.