I am attempting to display a static image (located here) for the mobile version of this site's home page. The desktop version of the site currently has a row with a full-sized background .mp4 video running from the Media Library.
I have followed both the instructions via the Salient site (see attached) to flag the mobile view, as well as added the custom .css from your support thread (here). Neither the back-end Salient option nor the custom .css has provided the solution, and the mobile view shows a sliver of the preview image against the black background image.
Your support is greatly appreciated as this client is pushing for this change for Go-Live. Thank you so much. - Tanya
That supported me in displaying the static image. However, no matter how I resize it on the back end, it is not displaying correctly on mobile. Attached is the image I am using, and I believe it is sized correctly at 480px. Thanks so much for your continued support!
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):
Yay, that works. However, it's showing large white space padding and I don't have any padding on it. Any suggestions on how to remedy that? THANK YOU SO MUCH FOR THIS! Lifesaver!
I am attempting to display a static image (located here) for the mobile version of this site's home page. The desktop version of the site currently has a row with a full-sized background .mp4 video running from the Media Library.
I have followed both the instructions via the Salient site (see attached) to flag the mobile view, as well as added the custom .css from your support thread (here). Neither the back-end Salient option nor the custom .css has provided the solution, and the mobile view shows a sliver of the preview image against the black background image.
Your support is greatly appreciated as this client is pushing for this change for Go-Live. Thank you so much. - Tanya
Hey Again,
You need to remove the Background Color as thats not needed. The Video Preview image will automatically show on Mobile instead of the Video.
Thanks
ThemeNectar Support Team
That supported me in displaying the static image. However, no matter how I resize it on the back end, it is not displaying correctly on mobile. Attached is the image I am using, and I believe it is sized correctly at 480px. Thanks so much for your continued support!
Attached is the image I am using for the mobile view.
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):
.mobile-video-image { background-size: contain !important; }Thanks
ThemeNectar Support Team
Yay, that works. However, it's showing large white space padding and I don't have any padding on it. Any suggestions on how to remedy that? THANK YOU SO MUCH FOR THIS! Lifesaver!
Hey Again,
Thats not the padding rather the Row Height on Mobile. Unfortuantely there is no such option to remove it.
Thanks
ThemeNectar Support Team