Website not being responsive on devices but is in the browser

[Amber]

I've only just realized after putting my site up a couple weeks ago that it is not being responsive in the actual devices. This is my website and here is what it looks like in my browser when the window is re-sized - https://dl.dropbox.com/u/85495001/browser.jpg

However when I got to it on my iPhone it looks exactly like the website but zoomed out - https://dl.dropbox.com/u/85495001/iPhone.jpg

I'm not sure what could be causing this as the only thing I've really changed is the CSS and my media queries are in there. If any help could be provided as to what might be happening it would be appreciated...

[Bill Murray]

1) Always include a clickable link to your site. Yes, it's there in your screenshot, but the easier you make it for people to reply, the more likely you are to get good replies.

2) The responsive layouts appear to work for me in my quick tests. What isn't working for you? Keep in mind that media queries add some styling rules to the default styles, so if you change the default style you can break a responsive layout, even without changing the media queries. Did you keep a log of your changes or note them in your comments? Did you change anything related to width?

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Amber]

Thanks for the reply Bill. The website link is here (but I assume you already got it off the images), I had meant to add it in the original topic post but I guess I got side tracked. I'm not understanding how it's not working with me then. What devices are you using to test on?

I did change some widths but only to small areas of the website, like the events containing div and a few other not very big changes. The original layout I didn't change.

I've visited the website on my iPhone and a Samsung Galaxy 3 and both phones display to whole website as opposed to the media queries, yet when I re size the window the website re sizes. I'm really confused as to hat it could be.

[Bill Murray]

I didn't test on any devices when I made my original comment. I typically use desktop tools such as http://quirktools.com/screenfly/.

That said, I see your point. When looking on an actual device, I don't get the responsive design. So...

1) Your site is outputting a number of frames before the normal page head. Take a look in Firebug and you'll see what I mean. The opening head tag has to contain a "viewport" and your site doesn't have one.

2) For the viewport, check your child theme's functions.php for something echo'ing to the document head, similar to:

Without that, your mobile display won't be right. If in doubt, post your functions.php to a pastebin and post a link back here.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Bill Murray]

To clarify my last post, your opening tag doesn't have a viewport, but one does appear in the 2nd framed section. If you get rid of the frames, the viewport should take effect and your issue should be resolved.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Amber]

Hmm, thanks for the help..however I'm not sure what I can do about those framed sections. I took a look at it with FireBug and see what you are talking about though. I thought maybe it was a plugin but I deactivated them and checked the website again but there was no change...I'm not really sure where they are coming from...

Here is my functions.php from the child theme. Is there something on this file I could take out? - http://pastebin.com/87D7TRqt

[Bill Murray]

Nothing seems to be out of the ordinary in your functions.php.

Are you on a WP MS install? If so, did you check plugins activated on the site and the network? Do you have any MU plugins?

Are you using a domain mapping plugin? If so, try temporarily removing the mapping. If you look at the response headers, it appears the site first loads on the subdomain (where the viewport is set in the only head section) and the frames are being introduced when the domain is mapped to its top level domain. What is also strange is that 2 frames are being introduced, 1 of which appears to be empty.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Amber]

Thank you for your reply Bill. I've appreciated your feedback. I've been away all of March and just getting back into the swing of things.

With your help I've figured out why it wasn't working. I wasn't using a domain mapping plugin however the domain is being forwarded to a sub domain area of my own hosting account. I've set it up on another account I have and it works fine, so that is my issue then. Is there something I can do do have this responsive design work with a sub domain?

Thanks again!

[Author]

Posts