Using ProductCart - Thumbnail on product detail page too big

Thumbnail on product detail page too big

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Using ProductCart
Forum Description: Running your store with ProductCart
URL: https://forum.productcart.com/forum_posts.asp?TID=5171
Printed Date: 09-March-2025 at 1:08pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Thumbnail on product detail page too big

Posted By: Lecmaco
Subject: Thumbnail on product detail page too big
Date Posted: 14-June-2012 at 9:38am

Hi,

Recently I have upgraded my site to v4.5 and the thumbnail in the product details page have become big. I try to modify the storefront.css but not successful. My website is www.bricksworld.com

Hope someone can help. Thank you

Alan

Replies:

Posted By: Guests
Date Posted: 14-June-2012 at 12:00pm

Hi Alan,

This shouldn't normally happen, but it appears that you did lose some CSS on this during your update.

The default CSS for this is ~ line 900 in pcStorefront.css:

#pcMain .pcShowAdditional img {
	width: 50px;
	height: 50px;
	border: 1px solid #CCC;
	margin-bottom: 6px;
}

Personally, I wouldn't use both the width AND the height together like this, lest it squish your images. If only one or the other is defined (depending on whether your images are more horizontally or vertically oriented), then aspect ratio would be maintained.

Posted By: Lecmaco
Date Posted: 14-June-2012 at 11:34pm

Hi Seah

Thanks for help. I have modified accordingly but its doesn't work. Any change of the following will not change the look at all. Do not know any other css have override. If you using the chrome browser (right click on inspection element), you can view the complete css files.

I'm try to find is there any work around on it or directly modify on the viewPrdcode.asp.

Code extracted from pcstorefront.css

#pcMain .pcShowMainImage {

text-align: center;

vertical-align: bottom;

margin-left: 5px;

margin-right: 5px;

margin-bottom: 5px;

}

#pcMain .pcShowMainImage img {

width: 240px

padding: 5px;

border: 1px solid #FFCC00;

}

#pcMain .pcShowAdditional {

width: 84px;

text-align: center;

margin-left: auto;

margin-right: auto;

}

#pcMain .pcShowAdditionalImage {

vertical-align: top;

text-align: center;

padding: 0 0 0 0;

}

#pcMain .pcShowAdditional img {

width: 84px;

border: 1px solid #FFCC00;

}

#pcMain .pcShowMainImageBorder {

border: 1px solid #FFCC00;

}

Posted By: Guests
Date Posted: 15-June-2012 at 2:23am

Ah yes, Chrome's inspect element tool ... Couldn't live without it!!! I use it constantly.

What I could tell from this is that a whole lot of your style rules aren't being applied.

So I copied your pcStorefront.css file and loaded it in an "out of the box" PC 4.5 location, replicated the problem and then pulled it into an editor where I could scan quickly for format errors.

Here's your problem:

You clipped the closing bracket at the end of the second style rule here:

/* Add background color on mouse over when browsing */
		.pcShowCategoryBgHover {
			background-color: #F7F7F7;
		}
			/* Remove it on mouse out */
			.pcShowCategoryBg {
				background: none;

That should be this (note the closing bracket):

/* Add background color on mouse over when browsing */
		.pcShowCategoryBgHover {
			background-color: #F7F7F7;
		}
			/* Remove it on mouse out */
			.pcShowCategoryBg {
				background: none;
}

If I only had a nickle for every time I've done something like that myself ;-)

Posted By: Lecmaco
Date Posted: 15-June-2012 at 4:11am

Hi Seah,

Thank you very much and you save my days. I was so careless.

Best Regards From Alan