Okay
  Public Ticket #1333971
flickity gallery max height
Closed

Comments

  •  5
    Steve started the conversation
    October 13, 2017 at 3:29pm

    Hi,

    I am trying to use a flickity gallery. The images I am using however are not great resolution, about 700x500, so they look bad when the browser window is too big as they are scaled up. Is there a way to like, limit the max height of the gallery so they don't scale up? Any other possible suggestion?

    Thanks

  •  9,016
    Tahir replied
    October 16, 2017 at 11:33am

    Hey Again, Hope you had a Great Weekend, 

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Steve replied privately
  •  3,034
    Andrew replied
    October 17, 2017 at 10:06pm

    Hi Steve, 

    Thanks for the site access. 

    Try using the following code to set the max height of the gallery on larger screens: 

    @media only screen and (min-width: 1440px){
      .nectar-flickity:not(.masonry) .flickity-slider .cell img{
        max-height: 500px;
      }
}

    You can try adjusting the value to suit your needs. 

    I hope this helps. Please feel free to contact us if you have any further questions. 

    Best Regards.

  •  5
    Steve replied
    October 18, 2017 at 5:29am

    that was close, but it didn't shrink the width of the images proportionally so now they are squished. you can take a look on the page right now.


  •  3,034
    Andrew replied
    October 19, 2017 at 8:35pm

    Hi Steve, 

    Thanks for getting back to us. 

    You could try using the following CSS instead: 

    @media only screen and (min-width: 1440px){
  .nectar-flickity:not(.masonry) .flickity-slider .cell img{
    max-height: 500px!important;
    width: auto!important;
  }
.flickity-viewport{
  height: 560px!important;
}
  .nectar-flickity:not(.masonry) .flickity-slider .cell{
    width: auto!important;
  }
}

    Please feel free to contact us if you have any further questions. 

    Best Regards. 

  •  5
    Steve replied
    October 19, 2017 at 11:53pm

    Hmm still no dice :/

  •  3,034
    Andrew replied
    October 20, 2017 at 3:15pm

    Hi Steve, 

    Thank you for getting back to us.

    Could you elaborate a little further? Is it that the code didn't work? Or is it that this solution isn't the best option for you. Please let us know and provide a little more information so we can decide on how to proceed.

    Hope to hear from you soon. 

    Best Regards. 

  •  5
    Steve replied
    October 20, 2017 at 9:39pm

    Ok sorry about that. I took another look. It looks like that last code you sent didn't save properly in the salient theme options so it looked like the original code you sent. I tried it again and it actually worked pretty good, but I noticed a bit of horizontal stretching depending on the screen width. What I found worked pretty good was this:

    @media only screen and (min-width: 1440px){
      .nectar-flickity:not(.masonry) .flickity-slider .cell img{
        max-height: 542px!important;
        width: auto!important;
      }
    .flickity-viewport{
      height: 560px!important;
    }
      .nectar-flickity:not(.masonry) .flickity-slider .cell{
        width: 770px!important;
      }
    }

    Which just restricted it to the actual size of the images. How can I target the CSS to just those galleries with the extra class name "course_descriptions" so that the other flickity galleries work normally?

  •  3,034
    Andrew replied
    October 20, 2017 at 9:54pm

    Hi Steve, 

    Thanks for getting back to us. 

    Targeting the CSS to just that class can be done by adding ".course_descriptions " to the beginning of each of your CSS rules.

    @media only screen and (min-width: 1440px){
      .course_descriptions .nectar-flickity:not(.masonry) .flickity-slider .cell img{
        max-height: 542px!important;
        width: auto!important;
      }
    .course_descriptions .flickity-viewport{
      height: 560px!important;
    }
    .course_descriptions .nectar-flickity:not(.masonry) .flickity-slider .cell{
        width: 770px!important;
      }
    }

    Best Regards.

  •  5
    Steve replied
    October 21, 2017 at 7:05pm

    Aright man thanks a lot for your help that works pretty great right now. Awesome theme and keep up the good work. I'm trying out other themes every once in a while like infinite, avada, divi, but I keep coming back to salient. Is there anywhere people can post like, feature requests or anything? Do you guys have a list of features you are working on for the next update?

  •  3,034
    Andrew replied
    October 21, 2017 at 7:19pm

    Hi Steve, 

    Thanks for getting back to us and for using Salient

    For feature requests you can post them here and I'll pass them onto the developers.

    Feel free to contact us if you have any other questions as well.

    Cheers!