Announcement

Collapse
No announcement yet.

Category page images-Optics theme

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Category page images-Optics theme

    I'm working on applying the Optics theme to our store. I like the responsive scaling of the cat images but want to somehow regulate their height instead of width. As some of our products are quite tall and narrow while others are wide. it results in a bit of a jumbled look to the page. I hope i'm explaining this clearly.
    BTW, I don't use image types so I'm pulling the image by item number.jpg
    has anyone gone live with an Optics store?
    greg

    #2
    Re: Category page images-Optics theme

    I've located the section of css that seems to control the cat image dimensions however when i change it from width 240px to height 240 px some images are being distorted. The problem is to make both landscape and portrait images look good. define the height and landscapes get distorted, define just width and the portrait orientated ones are too big-(tho undistorted)
    Here's the bit of css:
    /* ------------------------ category-product ------------------------ */ .category-product {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    text-align: center;
    }
    .category-product a {
    color: #1f242c;
    display: block;
    line-height: 1;
    margin: 0 0.75rem;
    overflow: hidden;
    position: relative;
    }
    .category-product img {
    border: 1px solid #ddd;
    display: block;
    margin: 0 auto 1rem;
    padding: 1rem;
    height:240px;

    }
    .category-product a:hover img {
    border-color: #2bdfc0;
    }
    .category-product .semibold:before {
    background: #ddd;
    content: '';
    display: block;
    margin: 0 auto 0.75rem;
    width: 50%;
    height: 1px;
    }
    .category-product span {
    padding: 0 0.50rem;
    }
    any ideas?
    thanks
    greg

    Comment

    Working...
    X