Need help? Check out our Support site, then


Feature Image Sizing

  1. Hi,

    I'm having trouble sizing Featured Images correctly on the homepage of my new travel site.

    I'm using the Fresh & Clean theme with custom CSS. I wanted to make the Featured Image larger, so purchased the Custom Upgrade and attempted to do so with my very basic knowledge of CSS. I've tried all the code combos I can think of in terms of image width, height, alignment, pixel size, etc... however, the images still comes out mis-proportioned in the frame: always blown out, slightly stretched, and with everything but the center cropped out. (Even super high res versions also lose their crispness).

    The only specifications Fresh & Clean's developer gives for Feature Images is this:
    "The image must be at least 840 pixels wide, or else the post won’t appear in the slider."

    In terms of photo editing, I've tried making high-res images much smaller, then uploading. I've also done a lot of cropping and sizing in Photoshop and re-uploading, but the image always displays the same way within the frame no matter what I do.

    GOAL: I just want chosen images to display proportionately in the Featured Image frame. Do the theme's Featured Image settings make this impossible when the frame itself is re-sized? Is there just some coding I don't know that will fix the problem? Or photo editing technique I can't figure out?

    My Current CSS:

    section.featured {
    border:0 solid #12C0C9;
    width:auto;
    opacity:0;
    margin:0 0 -1.4em;
    }

    section.featured img,section.featured {
    vertical-align:top;
    width:1200px;
    height:375px;
    }

    section.featured img {
    max-width:85%;
    max-height:85%;
    }

    section.featured + .featured {
    position:absolute;
    top:0;
    left:0;
    right:0;
    }

    Original CSS:

    }
    section.featured {
    border: 10px solid #ececec;
    margin: 0 0 3.35%;
    width: auto;
    }
    section.featured img,
    section.featured {
    vertical-align: bottom;
    height: auto;
    }
    section.featured img {
    width: 100%;
    }
    section.featured + .featured {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    }

    Thanks to anyone who can help!

    Suzanne

    The blog I need help with is explore-differently.com.

Topic Closed

This topic has been closed to new replies.

About this Topic