Full-width fluid-design in Blogger

In this day and age, there is no excuse for webpages to be designed for any particular screen size, other than web-developer apathy, laziness, and/or sheer ignorance (read arrogance). In fact, there never was any reason in the past either.. Just that most developers of yore hand-coded html/css. These days most script-kiddies don't know anything beyond what their point-and-click tool can provide.

So you see almost all Google Blogger templates designed for a particular screen size. Looking for some pleasing design which is also fluid or full-width is too painful a search.

Your search ends here. Choose whatever template catches your eye, and easily change the width to fluid.

To edit the code behind your current theme, go to
[Blogger] ⇒ [Your Blog] ⇒ [Theme] ⇒ [Edit HTML]

Be sure to make a backup of the current code, just in case you make any mistake and would like to revert back.

Now click inside the code area, and use your browser's search facility to look for this code snippet:
.content-outer, .content-fauxcolumn-outer, .region-inner

Within this code snippet, change
max-width: $(content.width);
to
max-width: 100%;

Click [Save Theme] and then [View Blog] to enjoy the pleasing fluid layout.

Alternatively, you could add this code snippet to your CSS, which might be a cleaner approach.

No comments:

Post a Comment

most viewed