How do I please position the background video of a Nectar Slider so that it is aligned to the right hand side? At the moment it is using the centre of the video, which hides an important part of the image when viewed on mobile (on my website, the windmill is out of shot).
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):
@media only screen and (max-width: 690px) {
.parallax_slider_outer .swiper-slide .video-wrap video {
left: auto;
right: -20% !important;
-webkit-transform: translateX(0%) translateY(-50%);
transform: translateX(0%) translateY(-50%);
}
}
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):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.wpb_row.full-width-section .mobile-video-image {
margin-left: -50vw !important;
left: 50% !important;
width: 100vw !important;
}
}
Hello,
How do I please position the background video of a Nectar Slider so that it is aligned to the right hand side? At the moment it is using the centre of the video, which hides an important part of the image when viewed on mobile (on my website, the windmill is out of shot).
Many thanks!
Oliver.
Hey Again,
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):
@media only screen and (max-width: 690px) { .parallax_slider_outer .swiper-slide .video-wrap video { left: auto; right: -20% !important; -webkit-transform: translateX(0%) translateY(-50%); transform: translateX(0%) translateY(-50%); } }Thanks
ThemeNectar Support Team
Perfect! Thanks so much :)
Hi Tahir,
Please could you help me do the same positioning for the "Preview Image" in a nectar slider?
Thanks in advance!
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):
@media only screen and (max-width: 1000px) and (min-width: 1px) { .wpb_row.full-width-section .mobile-video-image { margin-left: -50vw !important; left: 50% !important; width: 100vw !important; } }Thanks
ThemeNectar Support Team