JAGeZe Share with: Twitter Pinterest Email LinkedIn Digg StumbleUpon Print Bufferapp LinkedIn LinkedIn LinkedIn LinkedIn WhatsApp About Found this useful? Please consider donating, Thank You! Donate
Home (JAGeZe)

Saturday, August 29, 2020

Screen Chopped in Google Blogger?


I've had this blog (it's Google Blogger) for a number of years and have always been somewhat frustrated that sizeable chunks were being chopped from both sides of the screen. Even though I've tinkered with the template before (added my own ads etc), I'd always been worried about tinkering with widths etc as I'd tried in the past and ended up screwing the whole lot up!
A day or two ago a contact was complaining that my blog appeared small even on a PC screen so I thought I'd have another stab at it...
An internet search threw up something I thought might be useful but the suggestions there didn't bear any resemblance to my theme source code so I can only assume it was probably quite dated.
But away I decided I'd try again so this is what I did...
To edit a theme, click on Theme in the leftmost section:

 

then when the Customize button appears you'll see just above that, My Theme with perhaps Customize, just above that, three vertical dots - click the dots, select Edit HTML and you'll be presented with the editor!


Initially you should save the Theme you have in case something goes wrong so select all the code in the Edit window, copy it and then open up an Editor (eg Windows Notepad) and paste this code into the editor and save the file.
Search for this block of code:
    <b:template-skin>
      <b:variable default='960px' name='content.width' type='length' value='930px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='180px'/>

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

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        $(content.width);
        $(content.width);
        _width: $(content.width);
      }

then replace the two lines in red with:
        min-width: auto; /*$(content.width);*/
        max-width: auto; /*$(content.width);*/

later _width: 90%; /*$(content.width)*/

Note that the original code is still there but commented out - /* ..... */

Click the Preview button and voila - don't forget to click Save if all's ok!

Well, any problems then just paste in the code you saved! Mine worked just the way I wanted it to!

So this is it now:-

Much better don't you think?