Could you help my with image size on image gallery (Nectar Slider style), please? I would like the picture to be displayed smaller. If I set the image size, it crops the picture, but doesn't make the size I want. Please see the screenshot. I tried to use a different gallery display. I get the to looks the size I want by using Flickity Static height, but then There are two other pictures from the gallery visible, but I need it to be just one picture. Other two should be visible only when someone clicks on the main image (one more screenshot attached).
I need the images in Nectar Slider display smaller. If there are only two columns, the image becomes really big. When I set the image size, it crops the original image, but do not resizes it. I would like to set the image display to 'max height 400px'. But not as a set size, so the image can adapt to screen size if its smaller like mobile. Would it be possible to do wit a custom CCS please?
I think it won't work. As the function to click on the picture and get the lightbox gallery won't be working anymore. Maybe then it's possible to create a custom CCS for Flickity Static Height gallery and hide these pictures on the sides as shown in a screenshot attached, so only one main picture is visible at a time?
Yes thats possible , 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):
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):
Hello
Could you help my with image size on image gallery (Nectar Slider style), please? I would like the picture to be displayed smaller. If I set the image size, it crops the picture, but doesn't make the size I want. Please see the screenshot. I tried to use a different gallery display. I get the to looks the size I want by using Flickity Static height, but then There are two other pictures from the gallery visible, but I need it to be just one picture. Other two should be visible only when someone clicks on the main image (one more screenshot attached).
Hey Again,
These are the available gallery options : http://themenectar.com/docs/salient/galleries/ . Could you let us know what exactly you need changed via css.
Best
ThemeNectar Support Team
I need the images in Nectar Slider display smaller. If there are only two columns, the image becomes really big. When I set the image size, it crops the original image, but do not resizes it. I would like to set the image display to 'max height 400px'. But not as a set size, so the image can adapt to screen size if its smaller like mobile. Would it be possible to do wit a custom CCS please?
The url is - https://ranebrook.co.uk/stag1ng/timber-windows/tilt-slide-spring-balance-sash-window/
Hey Again,
- Unfortunately we dont have any such options available at the moment while using the Nectar Slider Style in the "Image Gallery" Page Element .
- Try using the "Nectar Slider" Page Element Instead : http://themenectar.com/docs/salient/nectar-slider-plugin/
ThemeNectar Support Team
I think it won't work. As the function to click on the picture and get the lightbox gallery won't be working anymore. Maybe then it's possible to create a custom CCS for Flickity Static Height gallery and hide these pictures on the sides as shown in a screenshot attached, so only one main picture is visible at a time?
Sorry forgot to add the screenshot
Yes thats possible , 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):
.nectar-flickity[data-controls="next_prev_arrows"]:not(.masonry) .flickity-slider .cell.is-selected { visibility: visible !important; } .nectar-flickity[data-controls="next_prev_arrows"]:not(.masonry) .flickity-slider .cell { visibility: hidden !important; }Thanks
ThemeNectar Support Team
It didn't work. Could you check it one more time please?
Hey,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
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):
.nectar-flickity:not(.masonry) .flickity-slider .cell.is-selected { visibility: visible !important; } .nectar-flickity:not(.masonry) .flickity-slider .cell { visibility: hidden !important; }Thanks
ThemeNectar Support Team
This time it worked, thank you