You are here:  »  resize images


resize images

Submitted by Tobix on Tue, 2020-04-07 08:45 in

I found some tutorials inside the forum but if even adopting them, some images are very large and ruin the site design. How can I fix it?

Submitted by support on Tue, 2020-04-07 11:00

Hi Tobix,

The Foundation CSS scales images to fit the parent container, for example the main product image is contained in the div opened by this markup in html/product.php

<div class='small-8 medium-4 columns'>

To override the image size for the main product image, look for the following style definition in html/default.css (line 176 in the distribution)

  .pt_p img {
    margin-bottom: 20px;
  }

...and here you can add width, height, max-width or max-height attributes as required e.g.

  .pt_p img {
    margin-bottom: 20px;
    max-width: 200px;
  }

It's best to only ever fix one dimension of an image in order to avoid distortion.

Similarly, there are style definitions for Featured Products images (line 35)

  .pt_fp_image {
    border: 0;
    height:100px;
    max-width:none;
  }

...and Search Results (line 130)

  .pt_sr_image {
    border: 0;
  }

Let me know if you're not sure what to add / change to suit your layout...

Cheers,
David.
--
PriceTapestry.com