Shop: css issue


I’m creating this blog:

I do not know why, but the last product has a diffent with and height. The image is very big and cropped. In addition, when I click on “Saiba Mais” to see the desription, the image is very big and when I hover the mouse on the image, the zoom is weird.

What is happeding?

Please, help.

  • Michelle Shull
    • DEV MAN’s Apprentice


    Cool, that helps.

    Part of the issue is the size of the original images. It doesn’t look like it right off the bat, but those three images are actually the same width, 153px. It’s kind of an optical illusion, because the one extinguisher is shorter and stockier than the others, which makes the thumbnail look wider.

    From this info, it looks like the product thumbnails are trying to display at 153px square, but these particular images are a different ratio than the images you’ve used as thumbnails on the front page, so that thumbnail area is stretching to show the entire height.

    One way to work around this is to edit the original image and extending the background width in an image editor until the image is square. Keeping your product images within the same ratio (for example, images that are 800px x 600px, 600px x 450px, and 400px x 300px all have the same ratio) can make it a lot simpler to keep your thumbnails looking beautiful and proper.

    As to why you’re seeing the preview image tile on you, I think that may have to do with the size of the original image you uploaded. Can you attach the original for one of them that’s tiling here, or let me know the dimensions?


  • Michelle Shull
    • DEV MAN’s Apprentice

    Thank you!

    Yep, it’s too little, so it’s tiling instead of filling the whole preview area. You could try making the image itself larger in Photoshop, but stretching it runs the risk of making it look terrible and pixelated on zoom.

    Do you have a larger source image you can start with for these products?

    We’ll get it looking great! We’re almost there!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.