[Resolved] Thumbnail borders won't stick

[Dave]

I’m using thumbnails on a category archive page. Thumbs are set to 200 x 150 in GP Premium. I have a css border on the thumbnails that works fine when viewed on anything greater than 768. When view is 768 or less, the border width assumes the width of the container, rather than sticking to the thumbnail.

The css I’m using is:

.post-image-below-header.post-image-aligned-left .post-image {
border: 7px solid lightblue;
margin-bottom: .5em;
margin-top: -0.5em;
}

Is there a way to:
A. Force the border to stick to the image, or
B. Make the thumbnail responsive, or
C. ???

(It’s on a local machine. I can provide screenshots if needed.)

[Tom]

Try this instead:

.post-image-below-header.post-image-aligned-left .post-image {
    margin-bottom: .5em;
    margin-top: -0.5em;
}

.post-image-below-header.post-image-aligned-left .post-image img {
    border: 7px solid lightblue;
}

[Dave]

Thanks Tom!
That did the trick!
Now, have you got any tricks to make css rules stick to my memory? 8^)

[Tom]

Haha I’m afraid not! They just start to stick with repetition 🙂

[Author]

Posts