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

Tweet

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.