Metric Theme, add mobile style?

[webgirl]

Hi - I'm using Metric Theme because my client wants the top left and right sections to stay fixed, so that the photo on the left and text on the right are appropriately sized regardless of viewport size. This displays well on all devices except an iPhone. The text takes up far more vertical space than the photo on the iPhone. I've tried to create a separate stylesheet or a section in the main stylesheet for smaller devices, I just can't seem to make this work. Does anyone know what I can do, is it even possible using a fixed width theme?

The development site is here: http://www.newtonmusicacademy.com/wp

Thanks.

http://www.newtonmusicacademy.com/wp

[Tom]

Hi @webgirl!!

Looking at your situation both here: http://responsive.pixeltuner.de/?s=http%3A%2F%2Fnewtonmusicacademy.com%2Fwp%2F
and here http://www.studiopress.com/responsive/

... fixed-width is not a factor in your design dilemna.

My opinion, and this might sound a bit harsh but is meant to help in the absolute best way... Your client has forced your choice of working platform based on a false premise: they've somehow convinced you to use a non-responsive theme as the foundation for a mobile responsive design requirement:

top left and right sections to stay fixed, so that the photo on the left and text on the right are appropriately sized regardless of viewport size

If you are to use 'appropriately sized' content areas 'regardless of viewport size', you cannot force the "top left and right sections to stay fixed" - they must adapt to the device viewport.

What you have going for you is a client that recognizes the benefit of making their content readable and usable on any device - this is a very good thing!

While you have invested some time and effort to try to adapt Metric as your base/platform, you can fairly easily carry over the design work to a truly responsive base design. Since you are looking to present a slider/text "home top" split area as a core design element, I would suggest you consider starting with a mobile responsive theme that delivers this for you out of the box. The rest of the design mods - the color palette, the menus, the featured content areas, the footer widgets, etc. can all follow fairly easily from a better choice of foundation. Some core themes to consider for this would be:

(My best recommendation) "Rasmus" theme by Web Savvy Marketing or "Erik", also by Web Savvy. Of course there are dozens of others, including.

Readyfolio2 by Themedy;
Nexus Dynamik Skin by Dynamik Pages;
Outreach Pro, Enterprise Pro or Executive Pro from StudioPress;
Terragon from Media Cairn is a free theme;

Each could each be adapted to suit your needs. Each of these is also Genesis 2.0-based so you'll also have the built-in benefits of HTML5. CSS3, Schema.org support and a more current framework to start from.

If you want to explore others, take a look at the 125+ mobile responsive, slider-based, Genesis 2.0 themes listed on my site from the link in the message footer. (This is not a plug for my site, but an offering of a starting point for a better project result for you and your client both today and down the road. Bypass any affiliate links if you liken - get the best starting platform for your project.)

Even if it takes investing ~$50 in a new theme, I think it's better for you all around.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts