Product Description Page Layout Issues

[jesicam]

Hi All!

I'm having some issues getting a nice looking layout for my product description page. The alignment is totally wonky and I searched high and low on the forums but couldn't find a solution that works. My shop isn't live, I'm still majorly tinkering, but here's a link to my current page:

http://jesicamilton.com/shop/index.p...&products_id=6

And here's a link to a layout similar to what I want:

http://www.lovechurchandstate.com/shop/item/10


...I've tried messing around in the stylesheet & also rearranging stuff in tpl_product_info_display but nothing helps with the alignment. I'm a clothing designer, not a web-developer... so I might be missing something obvious and just not realizing it

Thanks a bunch!

~ Jesica

[kobra]

You will need to make a copy of tpl_product_info_display.php file for your template override in barebones template structure

Edit it and re-order the elements - - this file is fairly well segmented into blocks that begin with "bof" & end with "eof" and full blocks can be moved
That and some css for tweaking will net what you desire

[jesicam]

Thank you... I have been doing that but just editing the tpl_product_info_display within the default folders. I have figured out how to rearrange the blocks - but I cannot figure out how to style these in the css to make them look neat & tidy like my example. None of my edits work and I'm out of ideas.

Sorry but I'm a bit dense... as I mentioned before I'm just a clothing designer stumbling through this to add a shopping feature to my website. If anybody could show me some css examples I would REALLY REALLY appreciate it!

[jesicam]

Just to clarify, I'm having a problem moving my description, price, drop down box, add to cart, etc. next to my main product image (to the right). I looked at this with the firefox developer tool and it looks like my additional product images are pushing everything down to the bottom?

I don't care if the additional images end up next to or underneath the main image, or even underneath the description, etc. like my example page. I just need to get things looking neat & tidy. Float: right and text-align: center don't do the trick.

[gjh42]

There are product info page layout mods available in Free Addons. One of them may get you most of the way to what you want.

[jesicam]

I actually used one already... it was the closest I could find to what I wanted but this is as close as it got me. It was the product_info_display_justified.

[jesicam]

So I took a screenshot of how this is showing up in the firefox web developer view. When I hover over the additional images, the highlighted field is way wider than the image itself (as shown). I think if I can shrink this field that might help the additional images align correctly? Sorry, I'm trying to be as descriptive as possible... I've spent hours on this problem already and I can't figure it out to save my life.

[jesicam]

Okay so I got the space around the images smaller by adding:

#productAdditionalImages {
width: 23%;
}


This managed to get them in a horizontal row, and it somehow moved them from the left of the main image to below them. It's a start. However - the rest of the page (description, attributes, add to cart) didn't end up rising up to the right of the main image like I expected them to. Also, float: right isn't doing anything to help tidy them up, they're scattered all over the place!

I'm still not sure what I'm doing wrong. As stated previously, any help would be greatly appreciated.

Link to page: http://jesicamilton.com/shop/index.p...59f502926de4eb

[kobra]

OK
So now try adding this statement to your stylesheet.css file

#productAdditionalImages {
        width: 280px;
        margin: 0em 0em 0em 22em;
        }

[gjh42]

You have a <br class="clearBoth" /> after the additional images, and this is keeping all following elements below the images. Add to your stylesheet

#productAdditionalImages .clearBoth {display: none;}

The best solution to your alignment issues is probably to have the #productDescriptionWrapper mentioned in the stylesheet enclose all of the elements after the images.