Search code examples
csswidthpaddingbloggerposts

Change paddings only on Blogger post pages


How can I change the paddings of the post body section in Blogger, but only on the post page, not on the home page of the blog.

This is the code where I am changing the paddings:

 .post-body {
  font-family: 'helvetica neue', 'helvetica', arial, sans-serif;
  color:#0e0e0f;
  font-size:18px;
  line-height:25px;
  font-weight:normal;
  padding:0;
  margin:0;
  text-transform:auto;
  word-wrap:break-word;

  text-align:justify;
}

I am changing padding:0; to padding:0 40px 0 40px;

The problem here is that I am using a grid/gallery style template on my blog, and when I change the padding using the above way, it changes the appearing of the posts on the home page, as well. Here is a screenshot:

home page screenshot

What I want is to make my posts narrower, since currently they are too wide and may cause the reader to get tired of reading and leave my blog.


Solution

  • You can use data:view.isSingleItem to check if the current page is a single post or page.

    Use the following code before </head>

    <b:if cond="data:view.isSingleItem">
        <style>
            .post-body { padding: 0px 40px 0px 40px; }
        </style>
    </b:if>