Post grid featured image

[canuck]

The post grid is working fine.

However, the image I need to show when opening the post is too small to fit the width of the page when loaded in full view. As such, unless I show full width thumbnail (with lots of whitespace), the wrapping gets weird at various sizes.

Is there a better way to show the photo on the post and have the wrapping work ok? Failing that, is it possible to have the photo autoshow (with caption) in the column for a given post?

Topic

[Jason Bobich]

Hello,

Do you have a link that demonstrates the issue you’re facing?

[canuck]

If you go to

http://s1057417.instanturl.net/haleyrehab.ca/about/practitioners/

on your computer, you will see the grid, showing a single entry. Click on the entry, and the underlying page is shown.

However, the text wraps around the image with unpredictable results for a given browser size.

If I set the image to do full width, it rectifies the wrapping issue, but because the image is a headshot, there is significant whitespace in the image.

Do you have any suggestions as for how to best show the image.

[Jason Bobich]

You could possibly try setting it to full width and then displaying the image wrapper as an inline block. Then, I believe the border should wrap cleanly around just the image.

So, from your child theme’s stylesheet, you could try something like this:

.single-post .featured-image.thumbnail { 
	display: inline-block;
}

[canuck]

I set the width to full and put the code above in the style.css of the child theme, but things seem to behave the same. Perhaps I am missing something?

[Jason Bobich]

Apologies, it should be this:

.single-post .featured-image-wrapper.thumbnail { 
	display: inline-block;
}

It should look like this:

[canuck]

Looks better, thank you.

[Author]

Replies