Responsive CSS problem

[abrightclearweb]

Hi,

I've had a go at making my own Genesis child theme. I'm nearly finished, but somewhere along the way it has gone wrong. I've just tested my site on a tablet and a phone and the text size is coming out tiny and unreadable.

When I resize the browser window to a smaller width in Chrome, the menu wraps across 2 or 3 lines, and the text looks fine. When I try the site on a mobile device of a similar pixel width, this does not happen - the menu fits into the window size, and as a result everything is correspondingly smaller.

The site is at http://www.flashprojects.co.uk/bemis-scotland/ and my stylesheet is at http://www.flashprojects.co.uk/bemis-scotland/wp-content/themes/BEMIS/style.css.

Any help would be gratefully appreciated. I can't see where the problem lies at the moment.

[David Chu]

Hi,
I'm admittedly not testing on mobile at the moment, but at every size I try, it looks just great! And an interesting cause, too.

I cannae break it. 😉 Maybe someone else will weigh in.

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[abrightclearweb]

Thanks Dave for the compliment. 🙂

The problem still remains, though.

Can anyone help?

[Tom]

I had a look at this @ 3am - back for another look as this is an interesting problem.

I can see what you mean about the smaller text and menu non-wrap when using both the default browser and Chrome on a Samsung TAB at 1024px x 600px. Chrome's device emulation and other tools such as screenqueri.es, breakpointtester.com and the StudioPress emulation test page also fail to show the same problem as on a real device. It's tough to suss out as the browser dev tools aren't available on the tablet, so others can't make adjustments and see them happen on their handheld devices.

At 1023px you've got a lot happening in your media query. I'd start by paring that down and seeing what changes when you reload on your tablet or phone. For instance, your search container goes 100% but overlays the top of the nav menu.

Your CSS does throw a lot of errors (37) and warnings (75) at the W3.org CSS validator. These aren't always killers, but 2 errors seem to be in your Genesis style.css (i.e. not in your theme style.css).

If that all pans out, I'd be tempted to disable your respond.js plugin just in case it's fiddling with the smaller device browsers somehow - I know that's a long shot but.... (Also interested to know if you've had good results with that on other projects.)

Please do let us know how this turns out.

(PS. Your "MEMO 376 December 9th 2013" sidebar link is 404.)
(PPS. Your CSS is nicely commented. 🙂 )

---

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

[abrightclearweb]

Thanks for your suggestions, Tom.

I will investigate further, and let you know what the result is.

Thanks for pointing out the 404 error too. 🙂

[Author]

Posts