Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 15, 2017 at 2:36 am #808349
    robopath

    Hello there,

    We’re having a problem with the video background on our homepage. When minimizing the screen on desktop, or when viewing on mobile, the video has black lines and a border above and below it. We would like it to stretch to fit, just as it does when viewing in full screen on desktop.

    Any help would be much appreciated.

    Thanks!

    June 15, 2017 at 9:34 am #808468
    Rikard

    Hey robopath,

    Could you try updating the theme to the latest version (4.0.7) to see if that helps please? http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Rikard

    June 15, 2017 at 4:55 pm #808616
    robopath

    Thanks Rikard,

    Will get back to you once we’ve had a chance to try that.

    June 29, 2017 at 2:10 pm #814486
    robopath

    Hello Rikard,

    Sorry for the delay – we’ve finally had the chance to do all the plugin, theme, and WP updates and the same issue is still there.

    Could you please advise what else it could be or what to try next?

    Thanks very much!

    July 2, 2017 at 9:45 pm #815614
    Basilis

    Hi,

    That issue might happening on desktop minimize, but what happens when you load from mobile?

    Best regards,
    Basilis

    July 3, 2017 at 5:46 am #815734
    robopath

    Hello Basilis,

    On mobile, we see the same thing (black box above and below the video background).

    Thanks,

    July 6, 2017 at 10:52 am #817136
    Victoria

    Hi robopath,

    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 or in your child theme style.css

    
@media only screen and (max-width: 450px) {
#top #portfolio .av-section-video-bg iframe {
  width: 730px !important;
      left: -50% !important;
}
#portfolio, #portfolio main {
  height: 400px !important;
}
#portfolio main.content {
  padding: 20px 0 0 0;
  vertical-align: top;
}
.av-special-heading.av-special-heading-h2.avia-builder-el-2 {
  padding-bottom: 30px !important;
}
#top #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 0.4em;
}

#portfolio .hr.hr-invisible.avia-builder-el-1 {
  height: 25px !important;
}
#portfolio  .alignright, #portfolio  .alignleft {
    float: none !important;
    margin: 0 auto !important;
    width: 70%;
}
.responsive #top #wrap_all #portfolio .flex_column {
  margin-bottom: 0px;
}
.responsive #top #wrap_all #portfolio p {
    margin: 0.1em 0;
    font-size: 20px;
}
#portfolio .content {
  padding: 20px 0;
}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 10, 2017 at 7:05 am #818568
    robopath

    Hello Victoria,

    Thanks very much for that. It seems to have worked for mobile; however, we’re still seeing the black bars above and below the video when resizing the screen on desktop to anything smaller than full size, or for example on an iPad, etc.

    Any ideas?

    Thanks!

    July 10, 2017 at 5:01 pm #818869
    Victoria

    Hi robopath,

    You can use this code for other screen sizes, just change the media query and adjust the settings a bit.
    For an iPad it would be

    
@media only screen and (min-width: 768px) and (max-width: 1024px) { }
and the next size is 
@media only screen and (min-width: 451px) and (max-width: 767px) { }

    Best regards,
    Victoria

    July 12, 2017 at 11:13 am #819928
    robopath

    Great, thank you – that worked!

    July 12, 2017 at 11:56 am #819937
    Sarah

    Hi,

    We’re glad that the team was able to help! Do you need further help with this topic? :)

    Best regards,
    Sarah

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