Weaver II is a new version of a highly configurable theme for WordPress sites. (Mingle Communities has a quickie-review of Weaver II.) I’ve liked the previous versions quite a bit. But this new version has some severe visual formatting problems that require workarounds for many sites, even the theme author’s own site, to look decent on mobile phones.
Previous versions of the Weaver theme displayed a simple site layout such as a fixed-width right sidebar with wider left content area decently on a mobile device such as an Android phone. Mobile phone browsers do a pretty decent job dealing with this kind of format, probably because it is really common.
Weaver II version 1.0.12 includes some new mobile support features presumably intended to make sites look better on mobile devices. Unfortunately, my experience so far has been that the typical site using a layout that is designed to look good on a PC screen around 1024 pixels in width ends up horribly mangled on a tiny mobile device screen. Typically you see severely clipped graphics and ads on the sidebar(s). The main content text sometimes gets turned into a vertical line of thousands of characters or a column of single words. Such a mess makes a site virtually unusable at worst and at best highly unpleasant to view.
It looks like this problem was introduced by using CSS max-width for the page wrapper rather than a fixed width. The intent is probably to allow content to flow nicely on smaller screens, but for sites with sidebars it can be a big problem. That’s particularly true for sites with images such as ads or widgets such as those from Facebook in the sidebars.
Fortunately there’s a simple workaround. I’m not bold enough to claim this is the best way to solve the problem, but it is a vast improvement over the default appearance from max-width.
First, open up the WordPress Appearance -> Weaver II Admin page to find the site layout width you configured. The default is 940 pixels, but a lot of people increase that to a bit more somewhere around 1000 to 1020 pixels to be able to fit 250 pixel to 336 pixel wide ad blocks from ad networks. You can find the width setting on the “Main Options” page under the “Layout” tab where it says “Theme Width”.
You’ll notice there’s also a “Theme Fixed Width” option right underneath that field. I tried checking that first, but found it doesn’t work well for some sites on which the page theme width has been changed upwards. For starters, it doesn’t seem to respect the width in the “Theme Width” field and drops back to the default. Maybe this is a bug? If so, hopefully it will be fixed in a future version.
Now switch to the Weaver II “Advanced options” page. Select the “
Section” tab and click on the multi-line entry field under “Custom CSS Rules”. Now simply add a line to force the page wrapper to be a fixed width:
#wrapper { width: 940px; }
Make the width match whatever you used for your theme width. Save the settings. Then refresh your web site page on both your PC and phone to check it out.
On some sites I’m working on updating to use Weaver II, this made them usable again on an Android mobile phone.
If your format can take some resizing of width, there are min-width and max-width options that may help. For example, if you want to both prevent the sidebar from crowding out the main content section but also need to keep it from getting so small it clips out the right edge of ad graphics, you might try playing around with the min-width and max-width settings something like this:
#wrapper { min-width: 800px; max-width: 1020px; }
#sidebar_primary { min-width: 342px; }
That allows some resizing but keeps sections of the page from getting so narrow when displayed on a phone that they are useless. However, if you’ve got banner adds that take up most of the width of your site’s page, you may find they run off the right edge of the page and the formatting starts looking wonky. In that case, it might be best to stick with a fixed width or to increase the min-width value until the appearance is tolerable.
