Friday, 9 September 2011

Blogger: make your blog fluid (fit any screen resolution)

   


As you may have noticed, it's been a few days since The Web Thought has changed its layout. Now it is fluid.

Not knowing exactly how Blogger templates are built, I searched the Internet a bit to find a way to achieve that, and I must say I didn't find much... Everything I found was not really working for me, because it mainly focused on changing widths in pixels, while I wanted to use percentages. Finally, after playing a bit with the Design panel, I managed to make The Web Thought fluid.

I tested it with different browsers and it looks good. Please let me know if you find issues that I'm not aware of.

Let's see how to do it!


First of all, go to Blogger and select the Design tab and then Edit HTML. If you use Blogger in draft, select Template and Edit HTML.
Now you can see the HTML code of your template. Search for "content.width" in your browser and you should find a section of the template that looks like:
<b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='1000px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='380px'/>

      <![CDATA[
      body {
        min-width: $(content.width);
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }
We need to change the following part:
      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }
Which is the style for the content of our blog.
In particular, we need to change the $(content.width) variable. As you can see, the variable is set with the following piece of code:
      <b:variable default='930px' name='content.width' type='length' value='1000px'/>
but if we try and change the value there, we will end up with a general template syntax error. That is why I decided to change it directly in the related style.
Consider that the values I have in The Web Thought might not be appropriate for your blog. Just change the values according to your needs and taste.
BEFORE SAVING THE TEMPLATE, make a copy of your original template, saving it to your PC, change the $(content.width) variable, and then PREVIEW the result. When your happy with the new look of your blog, save the template (applying it to your blog).

What I have - as an example - for The Web Thought is the following:
      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 1000px; /*$(content.width)*/
        max-width: 1280px; /*$(content.width)*/
        _width: 100%; /*$(content.width)*/
      }
As you can see, I decided to have as min-width 1000px, while as max-width 1280px. This will prevent the content to be overstretched. Then I set the width to 100%.

Again, please let me know if you found something wrong in the new layout.

Happy coding to all.

68 comments:

  1. Thanks for the hints for a blog width adjustments!

    ReplyDelete
    Replies
    1. Need help. I have some gdgets beside my blog but noe its way at the bottom. How can i put it back at the side

      Delete
  2. Glad you've found it useful. Take care!

    ReplyDelete
  3. Thanx for the instructions, I've just used them on my blog and it seems to be working fine!

    ReplyDelete
  4. Great Black Queen!
    Let us know your blog url so that we can see it in action!

    ReplyDelete
  5. Thank you for posting. For some reason it is not working with my blogger Simple template. I've added a background and set the columns in the layout design. Applying the code shifts my header and columns over to the sides, awkwardly overlapping the background framing my blog. :l

    ReplyDelete
  6. @No Ordinary Kinna:
    I've visited your blog but probably you revert to the default style. The background in any case is seen only a the top (its height is not enough for my resolution - 1280x1024). The problem with the columns width is that you should try and see what's the best for a large resolution but considering lower resolutions too. I invite you to play and try until you find a suitable value. And please follow the instructions with care - and do make a backup of your template before applying.
    Good luck and let me know.

    ReplyDelete
  7. Hi! I tried doing the same for my blog but can't make it work. My layout still seem to wide for regular screensize laptops. But it works find for wide screen desktops.

    ReplyDelete
    Replies
    1. Hi Kumiko,
      just play around with this two values:
      min-width: 1000px; /*$(content.width)*/
      max-width: 1280px; /*$(content.width)*/
      and find the appropriate screen size. Look especially at the min-width which is the minimum width (1000px could be too much for laptops!).
      Take care!

      Delete
  8. Hey there! Great post! Thanks :)) it's working well! I have a question though: is it possible to do the same for the sidebar? Because right now my layout is only partially fluid. I'd like for the right sidebar to automatically resize as well. Could you perhaps help me figure it out? :o

    ReplyDelete
    Replies
    1. Thanks for commenting the post.
      As for the sidebar, I have done a quick search in my template designer and found that - possibly - the place where to try and change the sidebar width is the following variable:
      $(main.column.right.width)
      I haven't played with it, but, if you dare, you can try. Please be sure to backup your whole template before making any changes.

      Delete
  9. Thanks for the fast reply! I had sorta figured it had something to do with that, but had no idea how to move forward from there :o Ive been messing around with it a little bit, but tbh im still no closer to a solution ;o my experience with designing websites/templates is tbh very limited. Any chance you could take a closer look for me? Ill follow your blog, even mention u in/on mine if u want :P

    ReplyDelete
    Replies
    1. Just a little help. I don't have much time to play with it.
      Search for:

      .main-inner .column-right-outer {
      width: $(main.column.right.width);
      margin-right: -$(main.column.right.width);

      and change it to:

      .main-inner .column-right-outer {
      width: 100%; /*$(main.column.right.width);*/
      margin-right: -100%;/*-$(main.column.right.width);*/

      Press "Preview". Now you see that the right sidebar is responding to the 100% width? If you play with those two values (100% and -100%) you might find what you are looking for.
      My opinion: I wouldn't change too much the values of the columns, because I noticed some strange behaviour. At least on my blog.
      Please REMEMBER TO BACK UP YOUR TEMPLATE. I won't be responsible for strange results :-)

      Delete
  10. Fabulous! Excellent explanation. Thank you! Worked.

    See it in action at:

    http://tweaksforpc.blogspot.com

    ReplyDelete
  11. Great help! Found what I was looking for. Thanks.

    ReplyDelete
  12. Hi

    I was wounding if it is possible to do this with the new Blogger Template Designer part. In the advanced section under add CSS. If you can help that would be grate thanks.

    ReplyDelete
    Replies
    1. Yes you can. Usign the HTML section, but it depends on the template you have chosen.

      Delete
  13. Don't work for me ._.'

    ReplyDelete
  14. Hi. WOW! Thanks! You're great. :D

    Anyway, tweaking this part will also help:


    body {
    min-width: $(content.width);

    to

    body {
    min-width: XXXpx; /*$(content.width);


    Thanks!

    ReplyDelete
    Replies
    1. This better?:

      body { min-width: 100%; }

      Delete
  15. This is pretty cool! But I couldn't implement this code on my Blog! Bad Luck.

    ReplyDelete
  16. Hey, you run such a splendid website, on it! And there is one thing that I would like to ask you. Is it a paid theme that you buy online or you turned to a common one?

    ReplyDelete
    Replies
    1. Thanks!
      The template used here for the Web Thought is one of the basics by Awesome Inc.

      Delete
  17. I really want to try this but every time I edit the HTML on my blogger, the mobile version is no longer adaptive to the current web design and I have to redo the entire blog to fix it...

    ReplyDelete
  18. That is strange. As you can see my blog is working correctly. Be sure to follow the above instructions.

    ReplyDelete
  19. Thanks! I found out that my template, for no good reason, made max-width the same as my min-width! Quickly fixed it into something a bit bigger. :) Now, it is fluid!

    Assaf Koss,
    Professional Author & Blogger,
    See my Blog & eBooks at AssafKoss.blogspot.com

    ReplyDelete
  20. I chose a blogger template then edited it but I cannot get the background to auto adjust. My html doesn't look anything like what you have as an example as to what to look for. It's mostly the templated html that was there already.

    ReplyDelete
    Replies
    1. I use an awesome inc template. Check carefully the code because it might confuse you.

      Delete
  21. Thanks Marco for the info. 2 things - Is there a way to center a picture in the header, it slides to the left on a larger screen and why do you still use a nav bar when it is easy now to remove it?
    Thanks in advance
    Ric Old

    ReplyDelete
    Replies
    1. Ric,
      If you need to center something you have to find the element in HTML and wrap it in a centred div or something.
      As for the nav bar, I don't understand what you mean.
      Thanks.

      Delete
  22. Hi! I really need help. My website is sartorialust.blogspot.com
    My navbar is an image map and it looks perfectly aligned in my browser but for others, it isn't. I tried these codes but they dont seem to work. :( Help!

    ReplyDelete
  23. Btw, I'm using the Simple template. Hope to hear from you soon! Still trying to figure out how to make it fluid.

    ReplyDelete
    Replies
    1. If your nav bar is an image map, you have to make it fluid as well. I don't know where the code of the navbar is, but the moment you find it you have to use percentage for the width, otherwise it won't work.
      I'm sorry I can't help you more, but every blog is different and it takes time to find the CSS related to each page element.

      Delete
    2. Hi Marco! Thanks for the answer. The navbar's width is 1134px. How do I make it a percentage?

      Delete
    3. Change 1134px into 100%. If it doesn't work, try different values like 90% or 80% (those are more likely to work as you expect!)

      Delete
    4. This is the navbar's code if it helps:


      <*div style='position: fixed; top: 0; left: 65px; z-index:123;'> <*img alt='' src='http://i.imgur.com/9aDRhbk.png' usemap='#map1367403623280'/>
      <*map id='map1367403623280' name='map1367403623280'><*area alt='' coords='91,18,103,28' href='/' shape='rect' target='_self' title=''/><*area alt='' coords='162,16,211,30' href='http://sartorialust.blogspot.com/p/about.html' shape='rect' target='_self' title=''/><*area alt='' coords='311,17,337,27' href='http://sartorialust.blogspot.com/p/faq.html' shape='rect' target='_self' title=''/><*area alt='' coords='436,17,506,27' href='http://sartorialust.blogspot.com/p/contact.html' shape='rect' target='_self' title=''/><*area alt='' coords='588,16,665,26' href='http://sartorialust.blogspot.com/p/blogroll.html' shape='rect' target='_self' title=''/><*area alt='' coords='915,10,935,29' href='http://www.blogger.com/follow-blog.g?blogID=7036237920987038780' shape='rect' target='_blank' title=''/><*area alt='' coords='948,12,969,30' href='http://twitter.com/jelinecatt' shape='rect' target='_blank' title=''/><*area alt='' coords='985,9,998,32' href='http://facebook.com/sartorialust' shape='rect' target='_blank' title=''/><*area alt='' coords='1013,9,1032,31' href='http://instagram.com/jelinecatt' shape='rect' target='_blank' title=''/><*area alt='HTML Map' coords='1132,40,1133,41' href='http://www.html-map.com/' shape='rect' target='_self' title='HTML Map'/>

      Delete
    5. Why are you saying that it's 1134px wide?
      Trouble is the coords! You can't make them dynamic. I don't think you can change that and make your navbar fluid. You need to use another type of navbar, IMHO.
      Anybody else can help?

      Delete
    6. Wait, so does this mean I can't use an image mapped navbar?

      Delete
    7. Hi Marco! It's me again. Sorry for too much questions but do you know the code for having a navbar like the one in these blogs? > http://www.tapeovercrystal.com/ & http://neonblush.com/

      Delete
    8. No idea about the code but I'm pretty sure that if you play with blogger dashboard you can create one.

      Delete
  24. Brilliant! Thanks, now my website/blog doesn't look like a monkey made it! bensmcserver.blogspot.com

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. You need to look into your HTML. Never thought about it...

      Delete
  26. I tried but this code but unfortunately it didn't work on my blog . Any other ideas?

    ReplyDelete
  27. Whew, this is the only thing that worked for me after searching. Thanks a bunch to you!! :))

    ReplyDelete
  28. Thanks for sharing such interesting information in such detailed format.

    ReplyDelete
  29. Great Post. I was searching for this. Your min-width tip was awesome.

    Can we a set min-width for right-sidebar?


    instead of 360px if we write some%, say 35% then it also resizes! Have you noticed it?

    Can we set min-width for right sidebar?

    ReplyDelete
  30. Thank you so much. Great Work. Cheers!

    ReplyDelete
  31. A few year later, and this still works. Thanks!

    ReplyDelete
  32. Thank you so much for this easy tutorial!

    It first didn't work but when I changed the body { mind-width: $ to
    body { min-width: 830px
    it worked! So thank you a lot!

    ReplyDelete
  33. Excelent! Thank you so much!!

    ReplyDelete
  34. 4 years later this post still awesome! Thx! It's better than Google Products Forum or Help.
    It's just what I was looking for. Some about Types of this variable but is easier to do this way than search for other types of variables to 'content.width" because they don't accept % (percent) numbers while the type is 'lenght', as you said syntax error.

    I did this way in CSS:
    *{
    min-width:0;
    max-width:100%;
    }

    This on template:

    <![CDATA[
    body {
    min-width: 320px /*$(content.width)*/;
    }

    .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 320px /*$(content.width)*/;
    max-width: 1120px /*$(content.width)*/;
    _width: 100% /*$(content.width)*/;
    }

    And I'm doing some other changes to make my template fluid.

    Thx

    ReplyDelete
  35. Thanks so much marco...i did mine like this and it works so well on both androids and destktops(ie7 and above)

    body{ min-width: 1000px; max-width: 1300px; width: 100%; }

    so it was very easy for me to use percentages in my 3 column layout: .divleft{ width: 20%; } .divcontent { width: 60%;} .divright{ width: 20%;}
    and it is working fine. Useful for people.. I love you..

    ReplyDelete
  36. It looks like it is exactly what I was looking for.

    But Marco, could you pls define or explicate the term "fluid"?

    fit any screen resolution ------- does it mean fit any desktop screen, or fit any mobile screen or fit both and display a blogspot in the best possible way, or display a blogspot on mobile screens with the least problems and distortions comparing to the desktop view?

    Are you talking about regular templates or about templates that have been already pre-designed as responsive?

    And what should be blogger settings for regular and responsive templates on mobile devices?

    Template › Choose mobile template

    On mobile devices, show a mobile version of your current template.
    Yes. Show mobile template on mobile devices.
    No. Show desktop template on mobile devices

    ---------------

    Mb this topics or Qs go beyond the issue in hand. But they are very important and confusing for so many blogspot bloggers

    Thx

    ReplyDelete
    Replies
    1. The fluid concept explained here fits for desktop screen. If you need to guarantee a correct mobile version, use the one from Blogger itself which works great.
      The template should be pre-designed (I use one from Blogger) and it's a responsive one.
      Hope it helps.

      Delete
  37. Marco,

    I highly appreciate your instant reply!

    template should be pre-designed (I use one from Blogger) and it's a responsive one. ---- are you talking about these templates?

    https://www.blogger.com/blogger.g?blogID=6666666666666666666#template/src=dashboard

    Simple
    Dynamic Views
    Picture Window
    Awesome Inc.
    Watermark
    ....
    ....

    If yes, are they all pre-designed as responsive?

    thx

    ReplyDelete
  38. please let me know if you found something wrong in the new layout. -------- this emulator http://www.mobilephoneemulator.com/ does not display your sidebar at all. Why?

    but the body looks great!

    ReplyDelete
  39. I can't help you more than what I said.

    ReplyDelete
  40. I changed my settings as you said but my text does not fit the screen like yours. For instance, when I minimize my browser window to half a screen your text adjusts to the new screen. Mine does not. Any help would be appreciated

    ReplyDelete
  41. Pls i have a problem...when i view my blog..dey text r too long.it reaches to tge right..how do i change it..my blog is joanoluchi.blogspot.com

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.