CODEWITHSUNDEEP
csswordpressimagewoocommerce
Daniel Coburn
Daniel Coburn

Reputation: 3

Woocommerce Aspect Ration and whitespace

I’m working on setting up a site and I have images that are all different sizes as they are different ad sizes i.e. 300×600, 728×90, 320×50 etc. On this page. you’ll see it briefly shows the full image the appropriate size (i.e. you can see the shrunk image), but then it zooms to fit the crop size and some images disappear completely.

I have tried changing the sizes, the hard cropping, and regenning thumbnails each time and I cannot get them to look correct. How do we do it? https://fullforceads.com/product-category/ads/static-ads/series1s/

When the page first draws I see them with enough space but then it zooms in on each thumbnail, but I cannot see what's causing it. I looked in the developers' tool, but think I'm missing something basic. I looked for a plugin that would add whitespace above and below, but couldn't find anything.

Upvotes: 0

Views: 1119

Answers (1)

JanMensch
JanMensch

Reputation: 2425

Your CSS is the issue here. I inspected your images and I found this:

.products .product .thumb-image, .products .product .hover-image {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

The background-size: cover; is the issue here because it tries to scale the image up so it fills the entire space. If you change that setting to contain, the image will only be as large as possible without cropping:

.products .product .thumb-image, .products .product .hover-image {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

The reason why the image is first displayed normally and then scales up is the following: if your webserver is slow or your CSS file is very large or if the CSS is loaded badly, it takes time for the CSS rules to take effect. That results in having the images displayed normally at first, then the CSS kicks in and the image is scaled up. Changing your CSS as I described should fix this.

I don't know your setup, but you might need to insert that CSS either in the theme settings or create a child theme, depending on the theme.

Upvotes: 1

Related Questions