Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #168363

    Hello,
    I am working with the enfold theme and I love it! I have a question though. My thumbnails for recent posts on the homepage are showing different sizes. How can these featured images remain consistent?

    Thanks

    #168420

    Hello cmccullough!

    Can you post the link to your website?

    Cheers!
    Yigit

    #168549

    Sure! The recent post thumbnails are at the very bottom of the homepage.

    http://truessence.net/

    #168949

    Hey!

    Please add following code to Quick CSS in Enfold theme options

    .avia-content-slider .slide-image img { height: 220px; }

    Cheers!
    Yigit

    #168953

    Yes that works great except that it is not responsive. How do I make these thumbnails responsive for mobile because right now they are squished to fit the height.

    Thanks!

    #169409

    Hi!

    You can use Media Queries to change them on different screen sizes:

    @media only screen and (min-width: 700px) and (max-width: 1000px) {
    .avia-content-slider .slide-image img {
    height: 180px;
    }
    }

    Cheers!
    Ismael

    #169423

    Thank you so much for your response!
    I inserted the code into the quick css, but the images are still stretching on mobile. Any ideas on why?

    #169703

    Hey!

    You can add something like this:

    @media only screen and (min-width: 768px) {
    .avia-content-slider .slide-image img {
    height: auto;
    }
    }

    It will prevent the image stretching but you will lose the uniform height. You can also set a specific height for the images:

    @media only screen and (min-width: 768px) {
    .avia-content-slider .slide-image img {
    height: 160px;
    }
    }

    Best regards,
    Ismael

    #169747

    Thank you again for your suggestions! I tried them but unfortunately it is still not working. It doesn’t seem like it is recognizing the media queries I am inserting. Why could this be?

    #169814

    Hello!

    Please try to append an !important tag like

    
    @media only screen and (min-width: 768px) {
    .avia-content-slider .slide-image img {
    height: 160px !important;
    }
    }
    

    and don’t forget to clear your browser cache.

    Cheers!
    Peter

    #169986

    Even after clearing the cache and adding !important, it still behaves the same and continues to stretch the images. :( What else could it be? Or is there a way to have the images crop instead of keeping the entire image in the thumbnail?

    #170255

    Hi!

    The code works on my end. These are the code and their respective screenshots on different screen width:

    @media only screen and (max-width: 1000px) and (min-width: 700px)
    .avia-content-slider .slide-image img {
    height: 180px !important;
    }

    @media only screen and (max-width: 767px) {
    .avia-content-slider .slide-parity-even .slide-image img {
    height: 160px;
    }
    
    .avia-content-slider .slide-parity-odd .slide-image img {
    height: 160px;
    
    .avia-content-slider .slide-parity-odd.first .slide-image img {
    height: 250px !important;
    }
    }

    Regards,
    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Homepage recents post thumbnails’ is closed to new replies.