Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 30, 2013 at 9:10 pm #168363
    cmccullough

    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

    September 30, 2013 at 10:36 pm #168420
    Yigit

    Hello cmccullough!

    Can you post the link to your website?

    Cheers!
    Yigit

    October 1, 2013 at 5:06 am #168549
    cmccullough

    Sure! The recent post thumbnails are at the very bottom of the homepage.
    http://truessence.net/

    October 1, 2013 at 8:56 pm #168949
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options

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

    Cheers!
    Yigit

    October 1, 2013 at 9:01 pm #168953
    cmccullough

    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!

    October 2, 2013 at 4:54 pm #169409
    Ismael

    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

    October 2, 2013 at 5:09 pm #169423
    cmccullough

    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?

    October 3, 2013 at 2:53 am #169703
    Ismael

    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

    October 3, 2013 at 5:30 am #169747
    cmccullough

    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?

    October 3, 2013 at 9:25 am #169814
    Dude

    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

    October 3, 2013 at 4:20 pm #169986
    cmccullough

    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?

    October 4, 2013 at 3:50 am #170255
    Ismael

    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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Homepage recents post thumbnails’ is closed to new replies.