Featured Image

  • geekimpulseadmin · Member ·

    Currently having issues with the featured images in the .owl-carousel. I’ve been trying to keep users to a 16:9 aspect ratio, however smaller images seem to give black spacing below the image. It becomes greatly obvious in the mobile view. Also the css band-aids I’ve placed seems to sometimes break the banner text.

    What is the recommended aspect ratio and sizing, including height, for the images? I saw that 712px was the sizing?

    I tried this but it didn’t resolve my issue.
    .blog-post-slider-thumb { max-height: 540px; }

    Here’s my current band-aid for the issue.
    .owl-carousel .owl-item {
    max-height: 540px;
    }

    @media     screen and (max-width: 1270px) {
    .owl-carousel .owl-item { max-height: 370px; }
    }

    @media     screen and (max-width: 767px) {
    .owl-carousel .owl-item { max-height: 215px; }
    }

    Thanks for your time.

    The blog I need help with is: (visible only to logged in users)

  • slobodanboba · Theme Author ·

    Hi,

    The issue is the width to height ratio of the original images. The theme resizes them to needed dimensions but WordPress also sets different sized images for the browser to use based on the display width.

    And because the original images have different width to height ratios, the resized versions that WordPress creates ( for different display widths ) don’t have the same heights.

    If you keep all the images at 1084×542 that would work out perfectly.

  • geekimpulseadmin · Member ·

    Thank you. That’s exactly the information I was looking for.

  • slobodanboba · Theme Author ·

    You’re welcome.

  • The topic ‘Featured Image’ is closed to new replies.