Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 21, 2021 at 3:41 pm #1274393
    chiliharstad

    Hi there!

    We have a ‘Fullwidth easy slider’ element as the hero on the front page of one of our sites. That element contains only a Vimeo video, and has an image of the first frame in the video set as a fallback image.

    The issue is that the element takes no space until its content (the video) is loaded, and then causes a content jump when it does show up. The fallback image doesn’t seem to have any effect here.

    Can be seen on the front page of the linked site in Private Content.

    January 21, 2021 at 4:55 pm #1274453
    Victoria

    Hey chiliharstad,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #full_slider_1 {
   min-height: 80vh;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 21, 2021 at 5:04 pm #1274461
    chiliharstad

    Hey Victoria. That’s a bit too simple, sorry. That element was chosen to maintain the aspect ratio of the video – The same aspect ratio that the fallback image has. The element should be taking the dimensions of that as a base, no? Just like with the video.

    Setting a min-height: 80vh; like that will still cause a jump as soon as the content is loaded in, at all screenwidths, as the height of the video is always relative to the aspect ratio.

    January 21, 2021 at 6:00 pm #1274481
    Victoria

    Hi chiliharstad,

    It normally is, but I saw some custom css on the website that is limiting the max-height, please check in private.

    Best regards,
    Victoria

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