The large image "Klarglasflaskor" in the portfolio gallery (about in the middle of the page if you scroll down) gets distorted in all viewport widths except for the narrow one column/mobile width. The original image is 1000x1000 px so it should really be a perfect square. But, for example, in the wide desktop view it's 730x690 px, so its height gets squished and it does not look good, since our bottles' proportions get distorted.
To me it seems like a bug with the portfolio gallery when setting an image to take up this larger size.
I don't think that is the problem. I turned off the Autoptimize plugin anyway, but it did not do anything. When I inspect the image in Chrome's DevTools, I can see the img src and open the image in a new tab. In the new tab it is shown with the correct proportions.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.portfolio-items[data-col-num="elastic"] .col img, body .masonry.meta_overlaid .post-featured-img img, body .masonry.meta_overlaid .content-inner .whole-link {
height: auto !important;
}
Hi,
The large image "Klarglasflaskor" in the portfolio gallery (about in the middle of the page if you scroll down) gets distorted in all viewport widths except for the narrow one column/mobile width. The original image is 1000x1000 px so it should really be a perfect square. But, for example, in the wide desktop view it's 730x690 px, so its height gets squished and it does not look good, since our bottles' proportions get distorted.
To me it seems like a bug with the portfolio gallery when setting an image to take up this larger size.
Please help,
Peter
Hey Again,
Try turning off the Autoptimize plugin and check .
Best
ThemeNectar Support Team
Hi Tahir,
I don't think that is the problem. I turned off the Autoptimize plugin anyway, but it did not do anything. When I inspect the image in Chrome's DevTools, I can see the img src and open the image in a new tab. In the new tab it is shown with the correct proportions.
Kind regards,
Peter
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.portfolio-items[data-col-num="elastic"] .col img, body .masonry.meta_overlaid .post-featured-img img, body .masonry.meta_overlaid .content-inner .whole-link { height: auto !important; }Thanks
ThemeNectar Support Team
That extra CSS worked perfectly. Thank you for quick support!