CODEWITHSUNDEEP
htmlcssmobile
rose
rose

Reputation: 11

making my custom made tumblr mobile friendly

Im trying to make my tumblr mobile friendly. As in when i go to the site on a mobile it will look and act the same as the main site but then smaller. At the moment its way too big. I have tried making @media codes in and out of .css. I have also added the: 

<meta name="viewport" content="width=device-width; initial-scale=1.0">

(with no luck.)

I think ive come to my end with it and I serious need help. I dont want to spend money on buying a monthly site just to convert it as i'm sure there is a way out (but i just haven't found it yet ) My coding skills are quite new (so please break it down) but im a fast learner ;)

the site: www.wordlessmedia.com

Upvotes: 0

Views: 4123

Answers (2)

fboes
fboes

Reputation: 2239

Making Tumblr blogs behave nice on mobile devices follows the same rules as with normale HTML pages; HTML as well as CSS have to be edited.

  1. Add <meta name="viewport" content="width=device-width" /> or <meta name="viewport" content="width=device-width; initial-scale=1.0"> to your HTML template
  2. Add a CSS with media queries; depending on your strategy you can use fluid layout or breakpoints

As a rule of thumb for a simple responsive CSS strategy:

  1. Avoid setting absolute widths (e.g. use % instead of px pr em.)
  2. If you have to set absolute widths, use media queries to change this widths to suit different display widths
  3. If you have multiple elements next to each other, consider putting them in a single column for small screens.
  4. A simple way of scaling images to fit the width of their respective container is img, video {max-width:100%}; this will scale images down if there is not enough space

See http://blog.3960.org/ for a live example of a responsive Tumblr blog (I have to admit that this is my blog :)). There is a small stylesheet at http://cdn.3960.org/_style/style.css, which defines some things fluid, and other things by settings breakpoints.

Upvotes: 2

Paradoxis
Paradoxis

Reputation: 4708

Try looking into the bootstrap css framework, It's very easy to pick up and is designed to work with smartphones/tablets in mind ( + it looks amazing ).

Upvotes: 0

Related Questions