addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwchatcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgoogleimageimagesinstagramlinklocation-pinmagnifying-glassmailminusmoremuplabelShape 3 + Rectangle 1outlookpersonplusprice-ribbonImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruseryahoo

WordPress London Message Board › Help with getting my WP site to resize and fill a mobile screen.

Help with getting my WP site to resize and fill a mobile screen.

A former member
Post #: 5
Hi guys

I wonder if someone might be able to point me in the right direction.

How do I make my website automatically fit a mobile device?

I don't want to use WP touch or such like, as I want the original website to look exactly as it does on a desktop. At the moment on an iphone, you only see the top left of the site, and you have to manually resize yourself by pinching the screen for it to fit the screen.

Does anyone know what code I need to add to make it do this? Everything I've researched on the net talks about detecting a mobile phone and then redirecting it to a mobile site etc. I however want to stay with the same site and just have the site fill the screen?

Rob
Jim D
user 9805225
London, GB
Post #: 1
Hi Rob

What you are looking for is known as a responsive theme. These themes detect the screen size and shrink to fit usually by showing sidebars after main content etc. What I suggest is search for "responsive wp themes" and take it from there. I know Woo themes have quite a few but they are premium.

Regards
Jim
Gen A.
genashley
London, GB
Post #: 13
"Responsive" themes are good if you want the site to adjust the layout according to the device's screen size. And Jim has explained that very well above.

However, Rob wants the site to not change layout, but just fit the screen of mobile devices. Pretty much how www.royalchinaputney.co.uk behaves at the moment on mobile devices (it looks exactly as it is on a normal browser).

Rob, I would think that (but I could be wrong) if the theme you are using is a "Non-Responsive" one, it should behave as you'd like on a mobile device. It may be that you've changed something (code or CSS) which made it behave differently? People who are more experts than me here, hopefully can help.

I actually have a challenge at present which is the opposite of your issue. I'm using a "Responsive" theme here - http://www.blissvenue...­. But I think I've broken the CSS or code, and it's not behaving "responsive-ly" smile on a mobile device. I'm in debugging "heaven" at present.

If someone is able to help you with your current issue, it might give me some clues as well how to resolve mine. smile
Ben G.
user 73084542
London, GB
Post #: 1
If you have the skills then it's not that hard to modify your existing theme to work as a responsive design.

The code is all css, so you'd need to read up on media queries.
JAY T.
user 46403672
London, GB
Post #: 5
If you are looking for an example then look at twentytwelve theme.

<http://wordpress.org/...­

Good luck.

Keith D.
user 11982360
Folkestone, GB
Post #: 21
Hi Rob,

You probably need to add the 'viewport' meta tag. Have a look at https://developer.moz...­.

Keith
A former member
Post #: 6
Hi guys thanks for your replies. Keith I checked out your links - thanks.

I read some of the bumph on optimising sites for different sized screens - it seems the general line of coding is something along the lines of:

<meta name="viewport" content="width=device-width" />

[ http://developer.appl...­ ]

Though as I'm still very much a coding novice, I'm not quite sure where this goes - I'm assuming somehwere in the style sheet at the top? but I'm not sure where exactly?
Keith D.
user 11982360
Folkestone, GB
Post #: 22
Hi Rob,

The meta tag should go between the <head> tags, probably in the header.php file of your theme.

Keith
A former member
Post #: 7
Awesome - all fixed - aligns and fits perfectly - i even managed to fix the blurry cufon fonts that didn't play nicely on retina displays. woo hoo
A former member
Post #: 8
oh - big thanks by the way
Powered by mvnForum

Our Sponsors

  • SiteGround

    SiteGround provides WordPress hosting that does not miss a thing!

  • WP Engine

    Providing WordPress hosting for mission critical sites.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy