Issue with Blogger Template

HTML & CSS
1

Hello everyone.

My blog is:
http://zoiik.blogspot.com

So I am attempting to set up a site through Blogger and up until today everything was going great. The custom template I had chosen was working fine, until suddenly it wasn’t. The template shows summaries of the blog posts in two columns, with two posts per row. But now it is showing all the summaries in a single column, leaving lots of blank space. Also, a drop down menu of my categories/labels is now displaced.

I thought I had made some sort of mistake with widgets, so I deleted the most recent ones I had added, which did not help the issue. Unfortunately, my knowledge of html/css is very limited so I don’t know where in the code to start looking for the issue.

Any help would be very much appreciated.

2

Hi Zoykii. Welcome to the forums. :slight_smile:

Your .post boxes are too wide, because padding and margin are added to the overall width. One option is to reduce the width from 280px to around 264px (line 245f):

.post {
margin: 0 13px 10px 0;
padding: 10px;
width: [COLOR="#FF0000"]264px[/COLOR];
height: 250px;
float: left;
positon: relative;
overflow: hidden;
}

To fix the drop menu positioning, you could remove the margins from the parent element by adding this to your style sheet:

#labelsmenu {margin: 0;}

That overrides this culprit:

.section {
margin: 0 15px;
}

… which you may or may not need elsewhere, though I suspect you might.

3

Hi, Your posts are too wide to fit in the space you have allocated.

You will either have to shorten the posts.

e.g.


.post {
    width: 265px;
}

Or work your way up the parents in that section and remove padding/margins etc. It looks as though if you remove the margin from .section then the original elements will fit but I don’t know what impact that may have site wide if you are using that class elsewhere.



.section{ 
   margin: 0;
}
4

Thanks for the quick reply.

I figured something like that was happening. Not sure why everything was working before and not now.

I applied the changes you suggested and it worked perfectly. =)

Thanks a lot.