I am using the image carousel to display images. I added a border with border radius to it so it looks like a monitor / tablet. But the issue is that the images that I add, which are all 1920x1080 (and the ratio is set to 16/9 in the carousel settings), seem to overlap eachother.
See the screenshot that I included. You can see where the image starts and where it ends.
Can you check it out to see what is going on? Padding, margin and transform X did not work.
Thanks for the CSS, but this doesn't seem to fix it. The images are still overlapping eachother (also above the 690px width). When you (re)load the page you'll see that the image is showing properly, but once the other images are loaded they start to overlap eachother.
Instead of adding the Border on the Viewport div add it to its parent.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi,
I am using the image carousel to display images.
I added a border with border radius to it so it looks like a monitor / tablet.
But the issue is that the images that I add, which are all 1920x1080 (and the ratio is set to 16/9 in the carousel settings), seem to overlap eachother.
See the screenshot that I included.
You can see where the image starts and where it ends.
Can you check it out to see what is going on?
Padding, margin and transform X did not work.
See https://www.lantack.com/homepagina-backup/ for the live version.
This is the CSS that I added to the page;
.flickity-viewport { border: 20px solid black; border-radius: 15px; -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 0px 20px -10px rgb(0 0 0 / 50%); box-shadow: 0px 10px 13px -7px #000000, 0px 0px 20px -10px rgb(0 0 0 / 50%); }Hey Again,
Try using a Different Carousel other than flickity as it requires atleast 5 carousel items to work correctly.
Thanks
ThemeNectar Support Team
Hi again,
Even with 5 items this seems to happen.
Could it be some kind of a bug?
Could you create a test page with just the Carousel so we can check more on this?.
Thanks
ThemeNectar Support Team
See: https://www.lantack.com/homepagina-backup/
This is the 'test' page of the old homepage where I am testing the carousel.
Thank you! :)
Please disregard.
ThemeNectar Support Team
Thanks for the CSS, but this doesn't seem to fix it.
The images are still overlapping eachother (also above the 690px width).
When you (re)load the page you'll see that the image is showing properly, but once the other images are loaded they start to overlap eachother.
This is what happens:
Hey Again,
Instead of adding the Border on the Viewport div add it to its parent.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-flickity { border: 27px solid black; border-radius: 12px; -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 0px 20px -10px rgb(0 0 0 / 50%); box-shadow: 0px 10px 13px -7px #000000, 0px 0px 20px -10px rgb(0 0 0 / 50%); }Thanks
ThemeNectar Support Team
And this is how it should be seen: (which works once the page loads, but stops showing this way once the other images are loaded)
You are the best! That fixed it... 😅