Equidistant Images with Captions

[Jenny Medford]

I do a lot of author sites, and this is an issue that just keeps coming up, as I am frequently needing to put a bunch of book covers of varying dimensions in rows on a page. Trying to get them all to be the same height and equidistant from each other and working responsively is such a headache! I have used display:flex several times, but it doesn't help in a case like the one below, where there are two rows of covers, and I want them to switch from 3-up to 2-up to 1-up as screens get smaller. Also, she wants captions under them, which causes more headaches.

http://cynthialevinson.com/NEW2017/

I guess I am just seeing if anyone knows of any way to do this such that the images stay the same height at most screen sizes, are equidistant from each other, and ideally the captions are not wider than the covers. (You can see from the link above that the last book's caption is noticeably wider than its cover, and that on the top row, there is more space between the last two books that the first two). 

I am fine with any solution, be it plugin, javascript (although I don't know how to craft it), or good old css. 

Thanks!

[Dan Poynor]

Hi Jenny,

Possible fix might be to use display:flex for the outer container and display:table for each book. Example posted here:

http://danpoynor.com/tests/20170724-caption-width-test/

Thanks,

DAN

Available for projects: http://danpoynor.com/ 

--
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To post to this group, send email to wordpress-austin@googlegroups.com
To unsubscribe from this group, send email to wordpress-austin-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/wordpress-austin?hl=en
 
Our meeting information is available at http://www.meetup.com/austinwordpress/
---
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wordpress-austin+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jenny Medford]

I'll give this a try, thanks!

On Monday, July 24, 2017 at 10:17:53 AM UTC-5, Dan Poynor wrote:

Hi Jenny,

Possible fix might be to use display:flex for the outer container and display:table for each book. Example posted here:

http://danpoynor.com/tests/20170724-caption-width-test/

Thanks,

DAN

Available for projects: http://danpoynor.com/ 

On Mon, Jul 24, 2017 at 8:22 AM, Jenny Medford <websy...@gmail.com> wrote:

I do a lot of author sites, and this is an issue that just keeps coming up, as I am frequently needing to put a bunch of book covers of varying dimensions in rows on a page. Trying to get them all to be the same height and equidistant from each other and working responsively is such a headache! I have used display:flex several times, but it doesn't help in a case like the one below, where there are two rows of covers, and I want them to switch from 3-up to 2-up to 1-up as screens get smaller. Also, she wants captions under them, which causes more headaches.

http://cynthialevinson.com/NEW2017/

I guess I am just seeing if anyone knows of any way to do this such that the images stay the same height at most screen sizes, are equidistant from each other, and ideally the captions are not wider than the covers. (You can see from the link above that the last book's caption is noticeably wider than its cover, and that on the top row, there is more space between the last two books that the first two). 

I am fine with any solution, be it plugin, javascript (although I don't know how to craft it), or good old css. 

Thanks!

--
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.

To post to this group, send email to wordpres...@googlegroups.com
To unsubscribe from this group, send email to wordpress-aust...@googlegroups.com

For more options, visit this group at http://groups.google.com/group/wordpress-austin?hl=en
 
Our meeting information is available at http://www.meetup.com/austinwordpress/
---
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.

To unsubscribe from this group and stop receiving emails from it, send an email to wordpress-aust...@googlegroups.com.

[Jenny Medford]

That works, thing of beauty, thank you so much!