-
Posts
-
Hello and hope you are well,
I am seeking code to customize the video size for mobile devices with the Advanced Layerslider. Essentially, I’d like to maximize it for mobile devices. The existing code is:
@media only screen and (max-width: 767px) {
span.logo{
padding-right:40px!important;
}
#top #wrap_all .av_header_transparency {
background: transparent;
position: absolute!important;
}
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
opacity: 0 !important;
}
.responsive #top .av_header_transparency .logo img.alternate {
display: block !important;
}
#header_meta {
color: white!important;
}
.phone-info a {
color: white!important;
}}Hey Chris,
Thanks for the link to your site, for the LayerSlider the best solution is to create a mobile version of the slider, because for mobile it will be a portrait view, compared to desktop which is a landscape view.
Try cloning your current desktop slider and naming it mobile, then change the canvas in the settings to about 425px x 768px and adjust the video to this aspect, if you find the video is cropped too much for mobile portrait then upload a new version of the video that will work for you.
Then set the visibility for the mobile video to only show on mobile and the desktop to only show on desktop.Best regards,
MikeHi Mike,
Apologies for the delayed response. I made the changes you recommended and rebuilt the videos and added a mobile site within Layerslider. However, in the desktop version, there is now a big great box below the video that I can’t seem to get rid of. Hoping you can help.
I appreciate your help and insight.
Best,
Chris
Hi,
Did you apply a background video or image to the layer slider? The blank space is the container for the background video/image but it is not displaying as it should. Please check the layers in the slider and make sure that the Background Video option is not toggled or enabled.
Best regards,
IsmaelHi,
Thank you for your patience and the login, for better control of the sliders I changed the visibility of the layers in both the mobile and desktop versions so the layers are visible on all sizes.
To control which slider will show I adjusted the LayerSlider ▸ Project Settings ▸ Mobile ▸ Hide Over / Hide Under, looking at your previous settings it seemed like you wanted the mobile version to also be the tablet version, so for the mobile slider I set it to Hide Over 1439px:
and for the desktop slider I set it to Hide Under 1439px:
Now there are no empty spaces where one or the other slider should show, please clear your browser cache and check.Best regards,
Mike
- The topic ‘Advanced Layerslider Mobile Full Screen’ is closed to new replies.