Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #682090

    Hi guys!

    Is there a way to have the full screen video loading on Desktop and a full screen slideshow with headlines for the mobile version on a site?

    I’m building the following:

    http://it-software.it/demo/CasaMarAzulSanPancho/

    and while the video is awesome on Desktop and very impactful, when you load the site on mobile, I can only place a Background image, which I did, but really doesn’t provide the effect we want. I’d like to be able to have at least headlines over the image, such as in an fullpage slider.

    See this example on mobile:

    http://it-software.it/demo/CasaMarAzulSanPancho/casa-mar-azul-uno/

    Any help?

    Thanks!

    Antonio

    PS: If I add the caption to the background image then upload the background image as placeholder for the mobile version of the video on display for desktop, it may not display the headlines correctly, since they’re ‘within’ the image.

    #682907

    Hi Guys,

    any news on this one?

    Thanks

    Antonio

    #683035

    Hi guys,

    since I haven’t heard from you in two days and I needed to put up a temporary solution asap for my client, you now view an image on mobile with a fake headline that i created using Canva.

    While it’s working now, I would nevertheless be happy if you could provide me with a better solution to my query above.

    Thank you.

    #683454

    Hi,

    Thank you for using Enfold. And we are very sorry for the late response.

    You can add two version of the full screen slider in the page, one with the videos and another with the images. Toggle their display properties on different screen sizes using css media queries. http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

    #684777

    HI @Ismael,

    I followed your instructions yet it doesn’t work.

    I have a color section as first element, where I put a video to display full screen on desktop only.

    Then I added a full screen slider right underneath as you mentioned and put the images I want to show up on mobile only

    Next, I followed the thread you pointed me to (http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/)
    had the custom CSS field for ALB elements function already turned on earlier, added the “only-desktop” into custom CSS field for the color section element and added the corresponding

    @media only screen and (max-width: 990px) {
    .only-desktop { display: none !important; }}

    code into the QuickCSS in Enfold theme options under General Styling tab.

    Result: nothing happened, the section still shows up on mobile.

    As for the fullscreen slider element (to display on mobile only devices) instead, there doesn’t seem to be any custom field showing up to enable “only-mobile” custom CSS class.

    Result: Can’t complete the operation.

    Can you dig into it?

    I give you all details below. Thanks

    Antonio

    #686217

    Hi Guys,

    Any update on this thread?

    Thanks.

    Antonio

    #687473

    Hi,

    I get “Page not found” error when trying to open link you’ve provided. Quite difficult to see what you want to achieve. Can you show us about which color section you are talking about please? screenshots would help. Basically you need to hide the fallback image on mobile and instead display a normal “Video” element from ALB. This video element you need to hide on desktop of course, so it will only be displayed on mobile.

    I hope this helps.

    Best regards,
    Andy

    #687474

    Hi Andy,

    sorry, I have meanwhile changed the url, which you may see below
    We’ve managed to sort the issue by ourselves meanwhile, so it doesn’t matter anymore.

    Thank you anyway.

    Antonio

    #688447

    Hi,

    glad you could solve it. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

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