Setting up product page - horizontal vs vertical images

Hi all!

Can someone please help me understand why the product listing layout differs whether my additional images are horizontal vs vertical? I understand the dimensions are different but how can I adjust my settings so that the layouts match better?

Currently my listings with vertical images looks good (a good gap between the main and additional images) but on my listings with horizontal images, there is a large gap between the main and additional images.

Is there anything I can do so that my horizontal addl images can be moved up closer to the main image without effecting the settings of the vertical images (because then they move up and overlap the main image)?

Also, I can't seem to move the addl images all the way to the left inline with the main image?? I've tried every margin setting out there with no luck.

Horizontal listing:
http://lunapetuniadesigns.com/index.php?main_page=product_info&cPath=4&products_id=36

Vertical listing:
http://lunapetuniadesigns.com/index.php?main_page=product_info&cPath=2&products_id=25

I thank you so very much for any advice or assistance - this is driving me crazy! :P

In you stylesheet.css

find:
#productAdditionalImages {
width: 700px;
float: left;
margin-left: -120px;
margin-bottom: 40px;
}

change to:
#productAdditionalImages {
width:100%;
margin-top:-170px;
}

you could also add this so the images don't look like they are on top of each other.

.additionalImages {
padding:10px;
}

hope this helps!

Thank you, rbarbour!

That moved the horizontal additional images up below the main image which I love - they look perfect now. But it puts the vertical images up next to the main image rather than below it. This is the problem I've been having. I can't get both image layouts to fall underneath the main image.

http://lunapetuniadesigns.com/index.php?main_page=product_info&cPath=1&products_id=21

Is it possible to create separate settings (would I create a div?) - one for horizontal images and one for vertical images? How can I do that if possible?

Thank you again!!!
Denise

in your product_info php file after:

contents within

try adding a
<br class="clearBoth" />

then in your stylesheet

find:
#productAdditionalImages {
width:100%;
margin-top:-170px;
}

change to:
#productAdditionalImages {
width:100%;
}

That did it, thank you, rbabour!

adding: <br class="clearBoth" />

after:

contents within

in product_info_display.php got the vertical images to move down below the main image!

I added margin-left: -50px in the stylesheet to get the images closer to the left side than the right.

#productAdditionalImages {
width:100%;
margin-top:-50px;
}

Thank you again for taking the time to help me....you have made my day, seriously!!! :hug:

Glad I could help :smile: