Image size

[mvangl]

Hello. Since I got such great help last time, I thought I'd give this a shot again (I'm very new to CSS). It seems really simple but I can't seem to change the image of my product (circled in red in the image provided below). Right now it's really small and I'd like to enlarge the size of the image next to the description.
Pic

Here is the direct link to it:

Link

Oh, and I'm working off of a template from GoDaddy if that helps anything.

Thanks in advance!

[Snookerman]

Add this to your css code:

.product-image img {
width: 200%;
}

You can change the red part to whatever size you want, you can also use pixels (e.g. 200px).

Good luck!

[mvangl]

Hello Snookerman, we meet again

I added that to my css codes, but it didn't seem to have an effect. It still looks the same. Any other idea?

Like always, thanks for all your help!

[Snookerman]

Hi mvangl
Yeah, it's because of this piece of code, get rid of it:

img {
max-width:100%;
}

[mvangl]

This may sound silly, but how do I get rid of that? I can't find it in my codes. I removed

.products .product img{
width: 100%;
}

just because it's the closest code to that, but it didn't do anything either.

[Snookerman]

It's in the layout_classic.css file on line 220. Here's a larger piece of the code so you can find it more easily if you don't have row numbers in your editor:

/************** Spacing Controls for various column contents ***************/
.textpadder,
.content {
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

/* Prevents long urls from breaking layout in IE, must 
be hidden in a conditional comment for CSS to validate */
img {
    max-width: 100%;
}

Remove just the highlighted part and then add the code I posted before and you should be fine.

Good luck!

[mvangl]

Ohhh...well, I may have a problem then . I don't think I can actually go into that file and delete the code. There's just a box in the Quick Shopping Cart site that allows me to enter in some CSS codes, and that's what I've been doing--entering some pretty basic things, but I can't edit any of the preset ones. I've never even seen that file you posted!

[Snookerman]

Alright then, this should do it:

.product-image img {
max-width: 200%;
width: 200%;
}

If that still doesn't work, try this:

.product-image img {
max-width: 200% !important;
width: 200%;
}

Good luck!

[jscheuer1]

The easiest thing to do in a case like this is to just make the image larger in an image editing program.

[Snookerman]

The easiest thing to do in a case like this is to just make the image larger in an image editing program.

I don't really agree with that. Sure, it's the easiest solution when you've got just one or two images to deal with, but in this case there are quite a few:
http://shop.waste-decals.com/category.sc?categoryId=7
Also, since this is a shop, chances are new images will appear frequently. Of course it's up to the OP themselves to choose how to do this, but I would definitely choose to write a couple of lines of css and not bother about it any more, over having to edit hundreds of existing images and also having to edit potential new images.