Okay
  Public Ticket #361940
lightbox cutting off image
Closed

Comments

  • ilias started the conversation

    Hi. I am building m site locally on MAMP and creating portfolio items. I have one portfolio gallery set to just be a lightbox gallery and it is cropping my images. I have searched the tickets and saw this: http://themenectar.ticksy.com/faq/2825. It did not work for me. I tried uploading new images after updating the media settings and the lightbox gallery doesn't use the large image, it uses the source image. 

    So..I tried making the source image 720x720 and it is still cutting it off. I don't understand why you can't make the lightbox image scale proportionally so it fits whatever the size. I have attached a screengrab with the inspector selecting the image to show it is getting cut off. 

    Is there a way to make images scale proportionally? I have portfolio images in various sizes. 

    Thank you!

  •  8,441


    ThemeNectar Support Team 

  • ilias replied

    Hi Tahir. Thank you for responding so quickly. I went ahead and regenerated all the thumbnails but it's still cutting off. So here is what I am finding after further exploration. When I view it on my laptop (Macbook pro: 1280px by 800px) it scales fine, but when I look at the site on my second monitor (1920px by 1080px screen resolution) it cuts off the image. So I did one experiment where I took one of my portfolio images that is normally 800x800 and created a new 1280x720 image (just added white on either side of it and re-exported the image from PhotoShop). When the portfolio image size is 1280 x 720 the portfolio item scales fine on my laptop but not the second monitor.

    I did a second experiment where I opened a portfolio item that is 800px wide and 1081px tall on my second monitor, left the lightbox image open and started resizing my browser window. When I do that the image scales inside the container div, but it continues to be cut off. Interestingly, when the website hits your mobile breakpoint (989px width), the ligthbox shows the whole image. So basically the image is showing properly in the container div during mobile view up to 989px wide, then after that it messes up.

    I just bought the theme a little bit ago and am redoing my site and so far it is an excellent and well-crafted theme with nice attention to detail such as only loading the exact google font weight you need as opposed to most themes that just load all the weights of a family. This lightbox is the only thing I am struggling with. I hope you can come up with some sort of fix. That would be fantastic.

    Thank you!

  •  988
    ThemeNectar replied

    Hey - try adding this into the custom css box located in your Salient Options panel:

    html, html body {
       overflow: visible!important;
    }