The site I am working on is this:

The CSS used is this:

I would like to make the image sizes slightly bigger to fill the space, but I cannot figure out which code to change... help!

Thank you!!!

2 answers

Tony B 86

The div containing the images is 175 pixels wide, I changed it to 225px and it seemed to space the images out better. You may have to change the width of the descriptions as well. I assume this is being generated dynamically so you shouldn't need to put all of the #product-1, #product-2 etc... in the CSS and instead tailor the div.product class to your liking. You can try editing the following code:

#products div.product {
float: left;
display: inline;
width: 175px; /* change this value to 225px or something that you like */
height: 100%;
border-top: 2px solid #fff;

Also change this typo:

html #products .product-info {
width: 175px;
w\idth: 157px;  /* width not w/idth  :-) */
Answered almost 7 years ago by Tony B
  • yes this is awesome but how you get the third product to stay in the same row as the other 2, i tryed this and it workd to get my images to where i have been trying to but the third image on the left side overlaps the second Matilda almost 7 years ago

Try editing the custom template. Since you have a paid account plan this should be available. You will also need to edit the css to make the page wider to handle the wider images within the div.

Look for the "product_image_url size" code and set the size to large instead of small or medium which ever is there. This will change the size from the 175.jpg to 300.jpg

And I guess if you want the image to be smaller than 300 you can edit the template to force the image height and width in the img tag.

For a similar reference question you can look here

here are more big cartel tips

Answered almost 7 years ago by Matt Anderson