[Theme: AutoFocus] Space between boxes change in update

I take it you mean the gap between the pictures. If so, this is the CSS rule that is creating the gap:

.af-grid #content .hentry {
  height: 188px;
  margin: 0 16px 16px 0;
  padding: 0;
  width: 188px;
}

So (preferably in a Child Theme so that your changes don’t get overwritten by updates), you could add a rule like:

.af-grid #content .hentry {
  margin: 0 8px 8px 0;
}

Cheers

PAE

Thanks so much Peredur… This is what I had to do but there is a glitch:

.af-grid #content .hentry {width:188px;height:188px;margin:0 16px 16px 0;padding:0;}

I changed the two 16s to 8s and this made the lower blocks move right, so I did the math added 16 and made the 188s into 194s. All perfect except:

1. there is a big gap on home page between grid and top big photo and
2. the photos were too small to fit in the newly sized larger boxes. How to fix this?

Thanks!

The thing is, you can’t have it both ways. Either you have a wide enough horizontal gap to fill the width, or you have a gap on the right hand side.

Of course you could centre the images to give an equal gap both left and right on each row. I think I’d put an extra <div> round the <article> elements and give it some left margin or padding if I was to do that. This will involve modifying the template file so you really should transfer all your changes into a child theme and do the modifications there if you’re going to do that.

Or you could alter the width of the #main and #sticky-area elements so that the whole thing is less wide. If you only want to do this on the front page you’ll have to use specificity, starting your CSS selector with body.home.

HTH

PAE

Thanks so much!

Cheers