Aligning images in the no thumbs w caption plugin

sandrameorme / 2014-02-07 16:38:12   

Hello. My website is meorme.com

I'm struggling with aligning images. I'm using mainly the No Thumbs W Caption plugin, and it all works well apart for portrait images. I'd like to have 2 of them on the same line and a specified distance between them (so to fill the all horizontal space), then go down to the next photo.
(If you look at this page it might sound clearer: meorme.com/… - the 11th and the 12th images should be one next to each other rather then one below each other.)

I have been searching in the forum, no luck, and I tried customising my self but no luck.

Any help?

arsondpi / 2014-02-07 20:29:20   

There's three ways to do this in the Legacy version: either combine the two images in one before you upload or hardcode the layout to your needs.

Last but not least you can continue to experiment with the css of your layout. For example if you add/edit the following css attributes:

  1. #img-container {
  2.     width: 1024px;
  3. }
  4. .nothumb {
  5.     float: left;
  6.     padding: 0 40px 9px 0;
  7. }
sandrameorme / 2014-02-09 14:42:57   

Thank you for your answer. I thought about combine the two images before but it's not ideal as I want to be able to chance / remove / add images easily without having to create them first.

The second advice worked really well, thank you so much.

Still have one issue though.

meorme.com/…

How can I center the 2 images? Or how can I leave a specific gap between them so that the edges align with the width of the landscape images above and below?
I tried adding padding and margins everywhere but I can't get it to work.

I can resize the portrait images so that the short sides make the width of the portrait ones (900px) but I'd still like to have a gap between them of the same size as the gap between the one landscape image and the following one.

Any help on this?

Thanks so much in advance.

arsondpi / 2014-02-09 15:05:34   

Centering is going to be a headache.
I thought the solution I posted sorted out the specified padding/spacing issue until I realised that padding was being overidden by inline css.
Try

  1. .nothumb {
  2.     float: left;
  3.     padding: 0 40px 9px 0 !important;
  4. }
sandrameorme / 2014-02-10 09:33:21   

Thank you so much! That worked really well.
I just need to resize the images at the right dimensions and then all great.

Thanks a lot for your help.

This thread has been closed, thank you.