Getting my Tumblr blog responsive

StackOverflow https://stackoverflow.com/questions/23660007

  •  22-07-2023
  •  | 
  •  

Question

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)

Heres my blog: symbolsofwealth.tumblr.com

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!

Thanks again, Lisle

<html>
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>



        <meta name="color:Background" content="#ffffff"/>
        <meta name="color:Text" content="#000000"/>
        <meta name="color:Video Corner Fold" content="red">
        <meta name="font:Font" content="'BrownBold'">
        <meta name="if:Show Captions" content="0"/>
        <meta name="if:Uppercase Links" content="0">
        <meta name="if:Fade On Hover" content="0">
        <meta name="if:Show Tags on Index Page" content="0">
        <meta name="image:header" content="0"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">




<script language=”javascript” type=”text/javascript”>

<!--
SYMBOLS OF WEALTH © Tumblr Theme
This theme was created by Lisle Abrahams for SYMBOLS OF WEALTH ©
-->

function clickIE()
{if (document.all)
{(message);return false;}}

function clickNS(e) {
if
(document.layers||(document.getElementById&&!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”)
–>
</script>




<style type="text/css">

@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}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});
</script>
</head>

<body>

<div id="header"></div>

{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title"><a href="/">{Title}</a></div>
<div class="archive"><a href="archive">Archive</a></div>
<div class="message"><a href="/ask">Message</a></div>
<div class="follow">{block:PermalinkPage}{block:Posts}<a href="{ReblogURL}" target="_blank">Reblog</a> / {/block:Posts}{/block:PermalinkPage}<a href="http://www.tumblr.com/follow/{Name}">Follow</a></div>
<div class="random"><a href="/random">Random</a></div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}




<div id="wrapper">

{block:Posts}
<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}
> 

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}

{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>&mdash; {Source}</p>
{/block:Source}
{/block:Quote}





{block:Photo}
{block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0"></div></a>{/block:IndexPage}


{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}

{block:PermalinkPage}{block:Caption}<div id="captions">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}




{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}

{block:Video}
{block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
<div id="video"> 
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}"></a>{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}

{block:Audio}
{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}

{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}

</div>
{/block:Posts}

{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a>{/block:NextPage}

</div>

</body>
</html>
Was it helpful?

Solution

Steps to implement responsiveness in website/blog:

1) Refer Mozilla MDN site for CSS3 media query specs

2) Don't use px instead use em and % for width and font

3) Identify the elements which you want to render differently for each resolution

Specify the @media query for each resolution which you can easily get from Mozilla MDN and define the css

@media (max-width: 480px) {   
     .element_selector {
      width: 90%;   // properties you want to change   }
 }

4) In case of images, make the width to be 100% of parent to make them fit within the container

 @media (max-width: 480px) {
       img {
         max-width: 100%;
       // properties you want to change
      }
     }

Keep doing that for all screen resolutions you want to focus.

5) At last add this meta to your header

  <meta name="viewport" content="width=device-width, initial-scale=1">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top