Topic Resolution: Resolved
  • Closed
  • Tad Blake-Weber
    Spectator
    June 6, 2015 at 12:46 pm #17950

    Is it possible to use custom CSS to make featured images act fully responsive and to also set the size of of featured images so they don’t get cut off?

    1. It appears the featured image is set to 680×330, but I would like to be at least 750px to fit the actual full width of the page’s single column.
    2. Also the size of the image is cutting off the top and bottom of my images (which have text) so that’s a problem and annoying.
    3. There appears to be a problem with the alignment with featured images and the breadcrumb area — when the brower window is 1200 pixels or more the featured image and breadcrumbs get out of alignment. But when the browser is 1150 pixels or less the two remain aligned.

    Here are screen shots to illustrate my points:
    https://monosnap.com/list/5572e805c38aa51e938005e7

    Denzel Chia
    Moderator
    Posts: 2656
    June 6, 2015 at 1:29 pm #17951

    Hi Tad,

    Thanks for the feedback.
    I had went into your site and applied the following custom css code.

    .thumbnail-post img{
    width:100%;
    height:auto;
    }

    This will make sure it’s responsive at all times.

    As for the cutting off the top and bottom of image, I am afraid you will have to edit your image in WordPress media before applying as the post thumbnail. The post thumbnail for Evolve+ theme is set at 680 x 330 cropped. Anything beyond it is cut off.

    Thanks!
    Denzel
    Denzel

    Tad Blake-Weber
    Spectator
    Posts: 7
    June 6, 2015 at 3:40 pm #17960

    Thank you, Denzel! I had a hard time finding the element name.

    This fix works. And resizing isn’t a problem.

    I appreciate the fast help again.