Product info below image & centered

:dontgetit hi, im helping a friend build a new site and have everything almost the way she wants it apart from this:

Is there anyway to have the product image with the product info directly underneath it (it keeps going to the right hand side of the image) and also have it all centered?

since it is not my own site please pm if you need a link, thank you in advance for any help :smile:

Anything is possible... most things can be adjusted by changing the CSS, sometimes the templates can be changed...

I suggest you use Firebug, an extension for firefox... with that you will be able to see the inner workings of CSS on the HTML and with a little time, figure out what needs to be adjusted.

:smile: Hi Steve ty for replying, i have no idea how to edit the code, i guess i was hoping someone here might already know how to do it.

Go into your \includes\templates\template_default\templates directory and make a copy of tpl_product_info_display.php. Put the copy in \includes\templates\YOURTEMPLATE\templates (where YOURTEMPLATE is the name if the template you are using).

Next, edit the copied file (the one inside your template directory) by adding this line:

<br class="clearBoth" /> 

after this line:

<!--eof Main Product Image-->

This will make a full line break after the image and before the description, and should put the text below it. If it's not centered you'll probably need to do a CSS edit of some sort as well, but that should bring it below the image at least.

you can also add this to the end of your stylesheet.css

#productDescription {
clear:left;
text-align:center;
}

this will move product description only under the image and will center the text for you .

Ah, I figured there was some way to do it with CSS, but I sure couldn't find one!

As for centering the image, this will work:

#productMainImage {
	width: 98%;
	}

It seems like there should be a better way to go about it, but nothing else I've tried seems to work...

Also, this forum is infuriating! I've never in my life had a forum tell me I had an 'expired token' -- much less twice is a row!

This was great for moving the description under the image, but now the price still lingers to the right of the image. How can I move that as well? Is there a way to do it using css as well?

Thanks

Answering my own question with what worked for me:

#productName {
clear:left;
text-align:left;
}

#productPrices {
clear:left;
text-align:left;
}