#container {
	width: 90%;
}

#content-container {
	width: 70%;
}

#sidebar {
	width: 28%;
}

#branding {
	width: 100%;
}

You may also want to adjust your header image to something wider or that has cleaner areas on the left and right so it looks better repeated on an x-axis. Once you've uploaded a new image to your media library, you can replace the url() value in this example to change out the image to your custom image:

#branding {
	background: url('http://txcowboydancer.files.wordpress.com/2013/02/banner-3c-940x200.png');
}

Widget title backgrounds are currently set with an image:
http://s0.wp.com/wp-content/themes/pub/mystique/colors/images/red/widget-title-red-large.png

That won't work for a flexible width, so you could add something like this that's a bit simpler and will always work no matter what the sidebar width adjusts to:

.widget-title, .widget-title span {
	background: red;
	border-radius: 8px;
}

1. Change the default width for the theme to make it fill more of the browser window (I'd like it to be flexible and set to 90%) rather than a fixed pixel size.

2. Change the width of the columns so that they are also flexible and set to a percentage.

#masthead h1 {
margin-left: 210px;
text-indent: 0;
text-align: left;
}

If you want to see how a properly designed modern responsive design reacts to narrow browser windows, take a look at the twenty eleven demo site and narrow your browser window way down.

http://twentyelevendemo.wordpress.com/

I've just started building this little site: huffs.ca
I used the rounded theme (flexible width theme)

When you resize the window the header text "HILLSIDE URBAN FARMERS FOR SUSTAINABILITY (HUFFS)" squishes
I'd like that to stop!

Any help would be so appreciated!

And about fixed or flexible width sure I didn't realize that is flexible before having problems with images re-size. With 500px width in main column it's easy that I never have seen Coraline narrowed before.

Thanks for your reply, 'justpi'.

}

/* 2-column layouts */
.two-column #container {
	max-width: 770px;
}
.two-column #content {
	width: 64.99%;
}
.two-column #primary,
.two-column #secondary {
	float: right;
	width: 30.4%;
}

Then, the sidebar width for two columns layout at maximum width is 234px.

The theme was changed to flexible width an the maximum sidebar wide was changed from 299px to this 234px. Luckily the main column remains in 500px width, sigh!

Fluid means the width of the theme changes according to screen resolution (or the width of browser) your visitors use.

Responsive width means the the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

The WordPress.com Theme team uses the “responsive-width” tag in the Themes Showcase to indicate which themes have this feature.

http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

Main column widths listed here:
http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

Themes with a sidebar listed here:
http://wpbtips.wordpress.com/2011/02/26/sidebars-and-other-widget-areas/

You can also customize the width using some custom CSS with our Custom Design upgrade. For more information please check out http://en.support.wordpress.com/custom-design/ .

If you are interested, you can purchase the upgrade at http://offtheshelfedge.wordpress.com/wp-admin/themes.php?page=custom-design .

I am trying to find a theme that allows me to customize the width of my columns. I have only found "Under the Influence" that allows me to control this. Can you recommend any other themes that have similar options I can control?

Thanks
Blog url: http://offtheshelfedge.wordpress.com/

Thanks for the screenshots. Looking at your site on my iPhone now it looks like the width issue has been sorted. The width loads properly now. The search bar covering part of your custom header image is unfortunate because of where the text in your header appears. You could adjust the position of that for your site with a custom CSS upgrade.

I was rather unhappy about this, since I really don't want to pay for the upgrade, however reasonably priced it is. What bothered me was that the interface gives you the choice between the mobile theme and the "full site", but with the responsive design you actually can't really choose a true "full site". (As I've said, my preference is to be able to view the whole site counting on readers using touchscreen gestures to isolate what they want to view, which allows for the full visual identity of my blog to stay intact.)

Interestingly, I just threw together a rough facsimile of my blog on my test blog, and it's changed since June. Now, my custom header doesn't show up at all. This, of course, resolves the problem of the search bar becoming superimposed over the header, which covered up the title of my blog. And, because I checked the box to hide the title text in Dashboard->Appearance->Header, without my custom header, which contained the title of my blog, there is no title at all unless I switch the setting to show the title text.

Finally, contrary to what @designsimply says above, the responsive design does eliminate the custom background almost entirely. All you can see is the black background to the main menu, the white background to the post column, and a tiny bit of the custom background color at the very bottom of the page.

I'd be happy to send a screenshot if you tell me where to send it to, or you can visit my test blog using an iPhone right now at: fandbtest.wordpress.com.

Again, thanks for engaging with me in this discussion. While I'm not a web designer, as I've mentioned, I am an enthusiast and appreciate your willingness to explore the topic.

That being said, the different moments for a design are just decisions, and perhaps you stumbled upon areas that could be improved. We would love to see a screenshot of what you find unpleasant so that we can ascertain whether it's intended or a visual annoyance that needs fixing.

Here is Hawaii I expect we won't see 4G till sometime after the start of the 22nd century and the "3G" that is here is really more like 1.5G. Well, 1.5G during lower use hours, about 0.,5G during peak usage times. And I'm not about to run out and spend another boat load of $$$ on a new iPhone just to get 4G (not to mention the increased cost on the data plan). I'll use my iP4 till it takes its last breath.

Quickly, concerning my Twenty-Eleven experience, most of the changes made by the responsive design functionality were tolerable, even having the sidebar drop to the bottom, but in my case the search bar becoming superimposed over the header image, like I said, was a deal breaker, since my custom header had my blog title in it. The background color was only barely visible on the iPhone, hardly enough to count as visible, imo.

Still, I'm curious what you think of my comment above, questioning the need for mobile optimization in the first place, given that touchscreen UIs are making it easier and easier to zoom in and read content in even very busy layouts.

I can kinda see the value from a desktop and laptop, non-touchscreen perspective, but that's about it.

There is an explosion of conversation about responsive design lately. In my opinion, there are good arguments on both sides of either using responsive design or a dedicated mobile theme, and each option is good for a different set of readers. From what I can see right now, the trend seems to be moving toward responsive design.

But, my post is not about the WordPress app.

Rather, as I wrote, it's about the mobile theme, which can be toggled on or off at: Dashboard->Appearance->Extras, as well as issues concerning flexible-width and fixed-width themes.

I purposefully didn't designate this as a support topic because I just think it's an interesting thing to discuss.

The WP.com mobile theme is actually quite old as a technology. I give WordPress credit for offering it as early as they did, as more and more people started using smartphones. It showed that they were paying attention to the trends and responding in a timely, creative way.

Right out of the gate, it met a need, it allowed blogs to load faster because they were stripped of most graphics. And, of course, it focused on post content already sized for a mobile screen.

However, much has changed since then. Wi-Fi was slower and hard to find, and there wasn't even 3G when the WP mobile theme was introduced. With 3G and now 4G available, the loading time isn't nearly as big an issue, and, as I mentioned in my first post, smartphone touchscreen gestures make it easy to zoom in on columns of text for easier reading.

Finally, from what I've heard, iOS 5 is supposed to have even more advanced technology for isolating columns of text content on websites and making it easier to read.

So, it's my opinion that both the mobile theme and flexible-width theme approach to optimizing websites for mobile devices are obsolete.

For the iphone wordpress app http://iphone.forums.wordpress.org/

If it is the app written by wordpress http://android.forums.wordpress.org/

ipad > http://ios.forums.wordpress.org/forum/

I'm interested in hearing what other WP.com users think about the default mobile theme, and mobile browsing in general, including issues related to fixed-width vs. flexible width themes.

(Note: I do not currently pay for the CSS upgrade, altough I'm starting to give it serious consideration. It's very reasonably priced, IMO, so cost isn't the issue.)

Backstory
I've never really liked the mobile theme, because it strips too much of my blog's visual identity. The customizing I do with the theme's default options are important to me, and to lose so many style elements - things like background color and the customized sidebar and footer - bothers me.

So, then I thought, the iPhone has touchscreen gestures (double tapping and pinching and zooming) that make it incredibly easy to isolate the main content columns on websites, I only have a two-column blog, so I might as well just disable the mobile theme. This way the whole blog loads initially, which might take a little longer, but then at least my whole visual identity is intact, and then the reader can zoom however they see fit.

Problem is, when I came to this conclusion, I was using Twenty-Eleven, the best all-around theme I'd tried in years, and because it's a flexible-width theme, it gets messed up in a mobile browser. (My custom header image - which in my case, at the time, contained the title of my blog - was covered over by the search bar, the background color was not visible at all, and the sidebar was bumped down to the bottom, beneath my last post, where it looked terrible.)

After much playing around, I settled on Bueno, a fixed-width theme, the mobile theme is disabled, but there are a few things about Bueno that I don't care for (one example: I don't like that only the day and month is displayed with each post...when someone views an older post from a previous year, the only way they can tell what year it's from is if they look in the URL).

Discuss
Anyway, I find it an interesting little dilemma, and I'd be curious what others think about it, what others have decided they'd do about these issues, etc.

Cheers!

Thanks again

Yes, I assumed you knew what you wanted - if you don't, I cannot really help! (Nor can I offer a complete tutorial here and now. If you check the blog linked to my username, you'll see that it's all about advice on wp.com blogs. One of the things I'm thinking of doing is a series of posts on handling and arranging images. Unfortunately for you, I haven't worked on that yet...)

A couple of basics:
a) Setting the alignment of an image to None or Center means no wrap-around: the rest of the content will start below that image. Setting it to Left or Right means wrap-around: the rest of the content will start next to the image. So, as timethief said, if you want two or three images in a row, you set the alignment of all of them to Left, and insert them the one after the other with nothing but a space between each one and the next. To make sure nothing else will squeeze itself next to the images, you add the br clear:both code after them. Same thing if you want a left or right aligned image with some text next to it: image - text - br clear:both after that text and before the rest of the content.
b) If you want all your test to be centered, don't use the wretched tool of the visual editor: use this in the HTML editor:

<div style="text-align:center;">
COMPLETE CONTENT HERE
</div>

Leave the captions until last, after things are the way you like.

If you don't do that, and are not using the html editor, there is a great probability that the captions and text code will get mixed up. The visual editor does not allow for precise placement of your cursor.

I can see that happening in the posts you have now.

If you leave the captions until last, then using the visual editor should work well for you.

It means that when someone has a wide screen with high resolution, the theme will fill up the width. Or a reader might grab the lower-left corner and make the view of the blog very narrow (or has a lower resolution screen), the flexible width will adjust. This means that pictures and text will re-arrange themselves to fit the width of the viewer's screen.