Need help with blog layout
Hey Guys,
I have a small query related to layout of my blog (klti.blogspot.in).
My blog appears in different layout on different devices (laptops, desktops etc.).
In my office I use a widescreen monitor so my blog appears to cover only half of screen space. On the other hand, if I open it on my laptop, I have to scroll sideways sometimes to see the entire blog.
I am not sure whether it happens with everyone. I don't see normal sites like indiblogger behaving like that (appearing diff on diff devices).
Is there a way I can define widths of my layout as 100% for entire blog and 30% for right sidebar, rather than "x" px for entire blog and "y" px for right sidebar.
I hope I have clearly communicated to you what my current problem is.
Any help would be highly appreaciated.
Yes Kapil you can but get help from some xml expert for doing this 
Are you looking for responsive templates which adjust the widths and heights and move sidebars to the bottom or hide them depending on the screen size? Search on Google for 'responsive templates blogger' and try some of them.
OR
Try the following :
Take a backup of your template and replace
body {
min-width: 1100px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 1100px;
max-width: 1100px;
_width: 1100px;
}
with
@media (max-width : 600px) {
body {
width: 600px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner
{
width: 600px;
}
}
@media (min-width : 600px) {
body {width: 100%;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
width: 100%;
}
}
You can replace 600 with any number. If the screen size is less than 600px, a scrollbar will be shown and the width of the displayed page will be set to 600px. If width is greater than 600 px, the sidebar will be set to 300 px and the remaining space will be filled with the main area.
Kapil, this happens because of the screen resolution of different devices. Like for example, you might have hardcoded a certain width in the template, which on a widescreen laptop, probably a 1440x900 or 1920x1080 resolution one might seem to appear covering only half space, i.e. probably the center part, while being blank on both the sides. When you use a laptop, say, having a resolution of 1366X768 (as most 14-15.6 inch laptops have), the hardcoded width of your page comes into play which renders your webpage in the resolution that you defined.
Then, coming to mobile devices, almost all blogger templates come with a mobile template that will be used if the server detects the User Agent (A piece of code that tells the server the type of browser/platform) of the browser you're using and if it's a useragent of a mobile device, it loads the theme suitable for mobile devices.
Do as Ranjith has described or - as I've done (I have changed the template's width settings to render differently on different resolutions by setting the width as percent (%) instead of pixels (px).
Search for something like min-width: in the template's html code window,
Code snippet from my template:
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;}
The text in bold is what has to be changed. Like for the code snippet Ranjith shared above, and the one I shared above, you can see some differences in the code. So, please consider and make changes appropriately. More specifically, lok out for - .content-outer, and then change the min-width, max-width and width in under this. AND WHATEVER YOU DO, PLEASE TAKE A BACKUP OF YOUR EXISTING TEMPLATE, SO AS TO RESTORE IT BACK IF SOMETHING GOES WRONG.
I don't know how to implement any of the changes you guys suggested...all your solutions sound too nerdy to me.. I can't make head or tail of it.
I think this is the part of my blog html code that needs to change..I am guessing (some characters look familiar)...
<![CDATA[ body { min-width: $(content.width); } .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: $(content.width); max-width: $(content.width); _width: $(content.width); } .main-inner .columns { padding-left: $(main.column.left.width); padding-right: $(main.column.right.width); } .main-inner .fauxcolumn-center-outer { left: $(main.column.left.width); right: $(main.column.right.width); /* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth - parseInt("$(main.column.left.width)") - parseInt("$(main.column.right.width)") + 'px'); } .main-inner .fauxcolumn-left-outer { width: $(main.column.left.width); } .main-inner .fauxcolumn-right-outer { width: $(main.column.right.width); } .main-inner .column-left-outer { width: $(main.column.left.width); right: 100%; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer { width: $(main.column.right.width); margin-right: -$(main.column.right.width); } #layout { min-width: 0; } #layout .content-outer { min-width: 0; width: 800px; } #layout .region-inner { min-width: 0; width: auto; } ]]>
Sorry, that came in real wierd...
Replace
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
with
/* body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner{
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
*/
@media (max-width : 600px) {
body {
width: 600px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner
{
width: 600px;
}
}
@media (min-width : 600px) {
body {width: 100%;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
width: 100%;
}
}
Take a backup before editing.
Brilliant! This worked on higher resoltions!! But on a resolution of 800*600, right sidebar occupies as much screen space as main blog content frame.
I think it'll be easier for me (with my level of expertise on these matters 
) to use responsive template that you suggested.
Thanks Ranjith and CyberKid for all your help.
You're welcome
And yes, if you want your template to be responsive, using a responsive template is better than adapting an existing one. 
You did it in template or CSS
Ranjith one can override the template values through direct CCS input ?
Yes.
You can specify the values as either
width: $some-name
or
width: 200px
If you use the first method, then the variable some-name will appear in the template designer and you can change it there. If you use the second method, you can change it by editing the value directly in the template. It won't appear in the template designer.
Sign in to reply to this thread
