Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1302245

    Is it possible to get a video with a 16:9 ratio in the layer-slider to be displayed full screen (full height) on mobile devices such as smartphones or tablets? I could not find any way to set that up. I would want to have the video centered in the middle and then just cropped at the sides for the portrait viewports.
    Thanks,
    Sascha

    • This topic was modified 3 years, 6 months ago by jhieronimus.
    #1302609

    Hey,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 480px) and (orientation: portrait) {
    #layerslider_9_1smp45qam2qxd, #ls-html5-1 {
        height: 736px !important;
    }}
    @media only screen and (max-width: 768px) and (orientation: portrait) {
    #layerslider_9_1smp45qam2qxd, #ls-html5-1 {
        height: 1024px !important;
    }}
    

    Best regards,
    Yigit

    #1302642

    Hey Yigit,
    thanks for the code. I pasted it into the QuickCSS but unfortunately that yielded no results at all…
    I just set up a WP-user for you to have a closer look …

    Hope that helps!
    Thanks in advance,
    Sascha

    #1302644

    Well, it actually did result in the video itself being upscaled but the layer-slider-container remains at 16:9 ratio.
    Sorry – didn’t notice that at first!
    Any chance to get the Layer Slider’s container to act accordingly (cover full viewport height)?

    • This reply was modified 3 years, 6 months ago by jhieronimus.
    #1303108

    Hi,

    Thank you for the update.

    Try this css code to adjust the height of the layer slider container.

    #layerslider_9_1smp45qam2qxd, #layerslider_9_1smp45qam2qxd .ls-inner {
        height: 100vh !important;
    }
    

    You may need to add more css rules inside the existing css media queries to adjust the container’s height on different screen sizes.

    Best regards,
    Ismael

    #1303111

    Hi Ismael,
    thanks for the code. I pasted it into the Quick CSS like below but to no avail:

    #layerslider_9_1smp45qam2qxd, #layerslider_9_1smp45qam2qxd .ls-inner {
    height: 100vh !important;
    }
    @media only screen and (max-width: 480px) and (orientation: portrait) {
    #layerslider_9_1smp45qam2qxd, #ls-html5-1 {
    height: 736px !important;
    }}
    @media only screen and (max-width: 768px) and (orientation: portrait) {
    #layerslider_9_1smp45qam2qxd, #ls-html5-1 {
    height: 1024px !important;
    }}

    Am I getting something wrong?
    By the way – does it make any difference wether I put the code into the Quick CSS of the theme or via the “Simple Custom CSS and JS”-plugin? Actually I am using both simultaneously…

    Thanks for your patience and support,
    Sascha

    #1303319

    Hi,

    It should work either way. Just make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. And remove or purge the cache.

    This is how the site looks when we apply the css code.

    Screenshot: https://imgur.com/U78D7DN

    Best regards,
    Ismael

    #1303373

    Hey,
    I pasted in the code, disabled both available file compression options(CSS and JS compilation/compression) and hit save. Emptied the browser cache before refreshing but still nothing happening on my end… sorry to be such a pain …!

    Thanks,
    Sascha

    #1303708

    Hi,

    No worries. We have found a few invalid css code in the Quick CSS field, and so we corrected those and formatted the rest of the code. We also adjusted the previous css code a bit so that it actually targets the very first layer slider in the home page. This seems to be working correctly now. Please do not forget to purge the cache before testing the page.

    This is the updated css.

     .home #layer_slider_1.avia-layerslider .ls-wp-container,
      .home #layer_slider_1.avia-layerslider .ls-wp-container .ls-inner {
        height: 100vh !important;
      }
    

    And we also deactivated the Performance > File Compression settings temporarily.

    Best regards,
    Ismael

    #1303730

    Hey Ismael,

    now it scales perfectly – thank you so much for your efforts!

    The last thing I could not find a way to establish is the vertical alignment of the main slide title. I tried percentage values within the layer slider’s “sizing and position” field but these always seem to reference the original 16:9 ratio instead of the actual viewport height. This results in the title always sticking in the upper half of the screen on mobile/tablet devices. The whole main slide title should always have a vertical position right in the middle/center of the viewport.

    Thanks again – I am really grateful for your excellent support!
    Sascha

    #1304308

    Hi,

    You may have to add a custom class name or ID to the layer and add a few css media queries so that you can adjust its style on mobile view. Edit the layer, go to the Links & Attributes and panel, then look for the ID or Class fields. Adjusting the top position value or adding margins above the layer on mobile view might help.

    To learn more about css media queries and how to use them, please check this article.

    // https://css-tricks.com/a-complete-guide-to-css-media-queries/

    Best regards,
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.