Product Info Pages

[bgs024]

Hi guys,

Firstly the URL iam asking a question about is http://bearygoodsigns.com.au/index.p...7fc91607ad3a9a
I want to re-format the way this page works, ive work out some of it, however I cant work out the main image part. I know it links to the tpl_modules_main_product_image.php file but no matter what I change i cant get it to center.
What i would like is for the image to be above and center with the product description directly below. Anyone got any ideas?

[haredo]

Hi guys,

Firstly the URL iam asking a question about is http://bearygoodsigns.com.au/index.p...7fc91607ad3a9a
I want to re-format the way this page works, ive work out some of it, however I cant work out the main image part. I know it links to the tpl_modules_main_product_image.php file but no matter what I change i cant get it to center.
What i would like is for the image to be above and center with the product description directly below. Anyone got any ideas?

Are you using Firefox, with the web developer kit to quickly locate the issue and play with her/him with the edit css button.

Look for:
#logoWrapper {
background-image:url(../images/bgsshead.jpg);
background-repeat:no-repeat;
height:78px;
width:390px;
}

1. this will help big time understanding properties
2. http://www.w3schools.com/CSS/css_margin.asp

[bgs024]

Its not the header image i want to work with. Im talking about the Product Image. The thumbnail on the product screen.

[gjh42]

The same principle applies for that. Add to your stylesheet

#productMainImage {float: none;}

[vivaraquel]

Thank you gjh42. This worked. See below for the section of code that needs to change.

/*Image Display*/
#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

#productMainImage {
float: none;
}

.categoryIcon {}

Kind regards.