Featured Image

  • Author
    Posts
  • #126377

    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)

    #126522
    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.

    #126648
    geekimpulseadmin
    Member
    Original poster

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

    #126650
    slobodanboba
    Theme Author

    You’re welcome.

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