CODEWITHSUNDEEP
htmlcssmobiletumblr
Scott Magdalein
Scott Magdalein

Reputation: 391

How do I get my single column blog content to "zoom" to fill the width of a mobile browser?

To be more specific, I have a single column Tumblr blog. I don't want to use a generic "mobile friendly" theme when someone hits it from a mobile device. I want the single column to fill the width without stretching the width of the content or making the font size larger.

Essentially, I want to "zoom" to the content without the user having to double-tap the screen.

Upvotes: 2

Views: 311

Answers (2)

jmccartie
jmccartie

Reputation: 4976

You need a couple of things:

  1. You need a mobile-only CSS file to change the stylings (usually simpler, with fewer or smaller images). You can use the "@media" tags to accomplish this. Here's a good article on this method: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

  2. Make sure you use "meta viewport" tags to set the width of the page. This will properly "zoom in" on the text that you're talking about. It tells the mobile browser how wide the page should be. Here's more information on the topic (specifically for iOS, but the tag can be read by other mobile browsers): http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Upvotes: 3

Chris Bode
Chris Bode

Reputation: 1265

You're going to have to use a special mobile friendly css if you want different behavior on a mobile browser. It doesn't have to be in a separate theme though.

You can preface a css rule with @media only handheld to make it target mobile devices with small screens only.

Give us your css and html and I'll give you a more exact answer.

Upvotes: 1

Related Questions