title: Getting my Tumblr blog responsive
body: <p>I'm just looking to get my tumblr page responsive. I've been searching through the net and I'm just getting confused with everything and I'm really struggling to try and do it. When the browser is shrunk down, the links at the bottom of the blog start to overlap each other, and the images do not 'flow' either. Also when you go into the permalinks, the specific image does not move with the browser (same problem with the links too)</p>
  
  <p>Heres my blog: symbolsofwealth.tumblr.com</p>
  
  <p>Any help would really be appreciated, I'm trying to learn all this stuff for future projects, and also to help others out if they encounter the same problems as me! </p>
  
  <p>Thanks again, Lisle</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;{Title}&lt;/title&gt;
      &lt;link rel="shortcut icon" href="{Favicon}"&gt;
      &lt;link rel="alternate" type="application/rss+xml" href="{RSS}"&gt;
      {block:Description}
          &lt;meta name="description" content="{MetaDescription}" /&gt;
      {/block:Description}
  &lt;link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'&gt;
  
  
  
          &lt;meta name="color:Background" content="#ffffff"/&gt;
          &lt;meta name="color:Text" content="#000000"/&gt;
          &lt;meta name="color:Video Corner Fold" content="red"&gt;
          &lt;meta name="font:Font" content="'BrownBold'"&gt;
          &lt;meta name="if:Show Captions" content="0"/&gt;
          &lt;meta name="if:Uppercase Links" content="0"&gt;
          &lt;meta name="if:Fade On Hover" content="0"&gt;
          &lt;meta name="if:Show Tags on Index Page" content="0"&gt;
          &lt;meta name="image:header" content="0"/&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  
  
  
  &lt;script language=”javascript” type=”text/javascript”&gt;
  
  &lt;!--
  SYMBOLS OF WEALTH © Tumblr Theme
  This theme was created by Lisle Abrahams for SYMBOLS OF WEALTH ©
  --&gt;
  
  function clickIE()
  {if (document.all)
  {(message);return false;}}
  
  function clickNS(e) {
  if
  (document.layers||(document.getElementById&amp;&amp;!document.all))
  {
  if (e.which==2||e.which==3) {(message);return false;}}}
  
  if (document.layers)
  {document.captureEvents(Event.MOUSEDOWN);document.  onmousedown=clickNS;}
  else
  {document.onmouseup=clickNS;document.oncontextmenu  =clickIE;}
  
  document.oncontextmenu=new Function(“return false”)
  –&gt;
  &lt;/script&gt;
  
  
  
  
  &lt;style type="text/css"&gt;
  
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 568px) { 
  
  
  
  
  }
  
  
  
  #header {
    height: 40%;
    background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
    position: fixed;
    margin: 15px 50% 0 50%;
    top: 0px;
    left: -300px;
    right: -300px;
    z-index: 1;
  
  
  }
  
  body {
  background-color:{color:Background};
  font-family:{font:Font};
  color:{color:Text};
  font-size:17px;
  line-height:25px;
  {block:PermalinkPage}
  
  {block:PermalinkPage}
  }
  
  
  
  a { 
  padding-bottom:2px;
  color:{color:Text};
  text-decoration:none;
  border-bottom:2px solid;
  }
  
  iframe#tumblr_controls {  
  display:none;
  }
  #wrapper {
  {block:PermalinkPage}
  width:580px;
  float:left;
  {/block:PermalinkPage}
  position:relative;
  margin: 160px auto; 
  }
  
  
  #post {
  padding:40px;
  {block:PermalinkPage}
  margin: 15px 50% 0 50%;
    top: 0px;
    left: -300px;
    right: -300px;
  {/block:PermalinkPage}
  
  }
  
  #captions {
      {block:PermalinkPage}
      position:absolute;
      left:600px;
      top:40px;
      display:block;
      border-top:1px;
      {/block:PermalinkPage}
  }
  
  
  
  #post img {
  width:100%;
  }
  #post img:hover {
  {block:IndexPage}
  {block:IfFadeOnHover}
  opacity:0.5;
  {/block:IfFadeOnHover}
  {/block:IndexPage}
  }
  #post embed, #post iframe {
  width:100% !important;
  }
  #post .photoset a:first-child {
  display:block !important;
  border:0 !important;
  padding:0 !important;
  }
  #post .photoset a {
  display:none;
  }
  .title {
  width:100%;
  text-align:center;
  margin:auto;
  position:fixed;
  top:20px;
  z-index:5000;
  }
  .follow {
  position:fixed;
  margin: 0px 30% 0 16.3%;
  bottom:20px;
  z-index:5000;
  }
  .archive {
  position:fixed;
  margin: 0px 20px 0 30%;
  bottom:20px;
  z-index:5000;
  }
  .message {
  position:fixed;
  bottom:20px;
  left:20px;
  z-index:5000;
  }
  .random {
  position:fixed;
  margin: 0px 0px 0 60%;
  bottom:20px;
  z-index:5000;
  }
  #toTop {
  width:100%;
  margin: 0px 0px 0 43%;
  z-index:5000;
  position:fixed;
  display:none;
  bottom:20px;
  cursor:pointer;
  
  }
  .player {
  background:#000;
  }
  ul.chat {
  list-style-type:none;
  padding:0;
  margin:0;
  }
  #infscr-loading {
  display:none !important;
  }
  
  .corner {
  top:6px;
  right:40px;
  position:absolute;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  overflow:hidden;
  z-index:4000;
  }
  
  
  .corner:before {
  content:"";
  position:absolute;
  top:0px;
  right:0px;
  border-width:0 25px 25px 0;
  border-style:solid;
  border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
  background:#fff;
  display:block; width:0; /* Firefox 3.0 damage limitation */
  }
  
  img    {
      {block:IndexPage}
  
        opacity: 1.0;
        -webkit-transition: all 0.3s linear 0s;
           -moz-transition: all 0.3s linear 0s;
             -o-transition: all 0.3s linear 0s;
                transition: all 0.3s linear 0s;
                {/block:IndexPage}
  
  
  }
  
  img:hover    {
      {block:IndexPage}
  
      opacity: 0.6;
        -webkit-transition: all 0.3s linear 0s;
           -moz-transition: all 0.3s linear 0s;
             -o-transition: all 0.3s linear 0s;
                transition: all 0.3s linear 0s;
                {/block:IndexPage}
  
  
  }
  
  
  {CustomCSS}
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
      $(window).scroll(function () {
          if ($(this).scrollTop() &gt; 100) {
              $('#toTop').fadeIn();
          } else {
              $('#toTop').fadeOut();
          }
      });
  
      $('#toTop').click(function () {
          $("html, body").animate({
              scrollTop: 0
          }, 600);
          return false;
      });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="header"&gt;&lt;/div&gt;
  
  {block:IfUppercaseLinks}&lt;div style="text-transform:uppercase"&gt;{/block:IfUppercaseLinks}
  &lt;div class="title"&gt;&lt;a href="/"&gt;{Title}&lt;/a&gt;&lt;/div&gt;
  &lt;div class="archive"&gt;&lt;a href="archive"&gt;Archive&lt;/a&gt;&lt;/div&gt;
  &lt;div class="message"&gt;&lt;a href="/ask"&gt;Message&lt;/a&gt;&lt;/div&gt;
  &lt;div class="follow"&gt;{block:PermalinkPage}{block:Posts}&lt;a href="{ReblogURL}" target="_blank"&gt;Reblog&lt;/a&gt; / {/block:Posts}{/block:PermalinkPage}&lt;a href="http://www.tumblr.com/follow/{Name}"&gt;Follow&lt;/a&gt;&lt;/div&gt;
  &lt;div class="random"&gt;&lt;a href="/random"&gt;Random&lt;/a&gt;&lt;/div&gt;
  &lt;div id="toTop"&gt;Back to top&lt;/div&gt;
  {block:IfUppercaseLinks}&lt;/div&gt;{/block:IfUppercaseLinks}
  
  
  
  
  &lt;div id="wrapper"&gt;
  
  {block:Posts}
  &lt;div id="post" 
  {block:IndexPage}
  {block:Post1}style="width:380px"{/block:Post1}
  {block:Post2}style="width:410px"{/block:Post2}
  {block:Post3}style="width:500px"{/block:Post3}
  {block:Post4}style="width:290px"{/block:Post4}
  {block:Post5}style="width:320px"{/block:Post5}
  {block:Post6}style="width:460px"{/block:Post6}
  {block:Post7}style="width:530px"{/block:Post7}
  {block:Post8}style="width:280px"{/block:Post8}
  {block:Post9}style="width:340px"{/block:Post9}
  {block:Post10}style="width:400px"{/block:Post10}
  {block:Post11}style="width:260px"{/block:Post11}
  {block:Post12}style="width:370px"{/block:Post12}
  {block:Post13}style="width:520px"{/block:Post13}
  {block:Post14}style="width:310px"{/block:Post14}
  {block:Post15}style="width:250px"{/block:Post15}
  {/block:IndexPage}
  {block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
  &gt; 
  
  {block:Text}
  {block:Title}&lt;a href="{Permalink}"&gt;{Title}&lt;/a&gt;{/block:Title}
  {Body}
  {/block:Text}
  
  {block:Link}
  &lt;a href="{URL}" class="link" {Target}&gt;{Name}&lt;/a&gt;
  {block:Description}&lt;div class="description"&gt;{Description}&lt;/div&gt;{/block:Description}
  {/block:Link}
  
  {block:Quote}
  &lt;a style="border:0 !important" href="{Permalink}"&gt;"{Quote}"&lt;/a&gt;
  {block:Source}
  &lt;p&gt;&amp;mdash; {Source}&lt;/p&gt;
  {/block:Source}
  {/block:Quote}
  
  
  
  
  
  {block:Photo}
  {block:IndexPage}&lt;a href="{Permalink}"&gt;&lt;div style="border:none"&gt;&lt;img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0"&gt;&lt;/div&gt;&lt;/a&gt;{/block:IndexPage}
  
  
  {block:PermalinkPage}{LinkOpenTag}&lt;div style="border:none"&gt;&lt;img src="{PhotoURL-500}" alt="{PhotoAlt}"/&gt;&lt;/div&gt;{LinkCloseTag}{/block:PermalinkPage}
  
  {block:PermalinkPage}{block:Caption}&lt;div id="captions"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:PermalinkPage}
  {/block:Photo}
  
  
  
  
  {block:Chat}
  {block:Title}&lt;h2&gt;{Title}&lt;/h2&gt;{/block:Title}
  &lt;ul class="chat"&gt;{block:Lines}&lt;li class="user_{UserNumber}"&gt;{block:Label}&lt;span class="label"&gt;{Label}&lt;/span&gt;{/block:Label} {Line}&lt;/li&gt;{/block:Lines}&lt;/ul&gt;
  {/block:Chat}
  
  {block:Video}
  {block:IndexPage}&lt;a href="{Permalink}"&gt;&lt;div class="corner"&gt;&lt;/div&gt;&lt;/a&gt;{/block:IndexPage}
  &lt;div id="video"&gt; 
  {Video-500}
  &lt;/div&gt;
  {block:IndexPage}{block:IfShowCaptions}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  {block:PermalinkPage}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:PermalinkPage}
  {/block:Video}
  
  {block:Photoset}
  {block:IndexPage}&lt;div class="photoset"&gt;{block:Photos}&lt;a href="{Permalink}"&gt;&lt;img src="{PhotoURL-HighRes}"&gt;&lt;/a&gt;{/block:Photos}&lt;/div&gt;{/block:IndexPage}
  {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  {block:IndexPage}{block:IfShowCaptions}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  {block:PermalinkPage}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:PermalinkPage}
  {/block:Photoset}
  
  {block:Audio}
  {block:AlbumArt}&lt;a href="{Permalink}"&gt;&lt;img src="{AlbumArtURL}"&gt;&lt;/a&gt;{/block:AlbumArt}
  &lt;div class="player"&gt;{AudioPlayerBlack}&lt;/div&gt;
  {block:IndexPage}{block:IfShowCaptions}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
  {block:PermalinkPage}{block:Caption}&lt;div class="caption"&gt;{Caption}&lt;/div&gt;{/block:Caption}{/block:PermalinkPage}
  {/block:Audio}
  
  {block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}&lt;br&gt;{block:Tags}&lt;a href="{TagURL}"&gt;#{Tag}&lt;/a&gt; {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}&lt;br&gt;{block:Tags}&lt;a href="{TagURL}"&gt;#{Tag}&lt;/a&gt; {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
  
  &lt;/div&gt;
  {/block:Posts}
  
  {block:NextPage}&lt;div id="page-nav"&gt;&lt;a href="{NextPage}"&gt;&lt;/a&gt;{/block:NextPage}
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>