Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 22, 2018 at 3:03 am #1048478
    cagraphicdesign

    Hi
    1. I have a short video stored on Vimeo as a background image on the home page which is working on computers but I get a black area on iphone and ipad. The video is a short loop. As a workaround I now have an alternate section there for mobile view with a still image in there but wondering if ipad/iphones can handle background videos.
    2. I am also having trouble with viewing the alternate version on my ipad. The vertical view shows the alternate layout for medium screens but the horizontal shows the one for large.
    3. on ipa horizontal and vertical the non mobile menu is shown but the menu items run into the logo so how do I assure that the mobile menu is shown?
    I am referring to the top section here:

    Home

    Thanks and glad I just bought another 6 months of your support…you deserve it!

    December 28, 2018 at 5:39 am #1049147
    Mike

    Hey cagraphicdesign,
    Sorry for the late reply, unfortunately videos as backgrounds is a limitation that has been added to the mobile devices for the sake of user bandwidth by the manufacturers.
    One work around was to use the layerslider, another was to use other file types, such as ogg or webm, There was also a HTML5 hack, but I’ve seen most people have the best results with using a layerslider.

    For your iPad menu issue, it looks like your mobile menu is only triggered up to 766px which is too low for tablets, please try changing your mobile menu to 990px at Enfold Theme Options > Main Menu > Menu Items for mobile or we could use a landscape media query for the mobile menu:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}

    To handle portrait & landscape, remove the line:

    and (orientation : landscape)

    Best regards,
    Mike

    January 3, 2019 at 1:51 am #1049414
    cagraphicdesign

    Thanks, the menu now works and my client is fine with just a still image for IOS.

    BUT I need the second question answered concerning the horizontal ipad version…it is trying to show the large device version so it is just a black background although the text overlay is working. It is also showing a section that I want only displayed on larger devices as well so do I need to change the tablet breakpoint? And if so, where is that done?

    January 3, 2019 at 4:10 am #1049429
    Mike

    Hi,
    To change the brake points for your top sections I removed the screen options you set in the color sections and added this css in your WordPress > Customize > Additional CSS it will allow us better control:

    @media only screen and (max-width: 1100px) { 
#id1 {
display:none !important;
}
}
@media only screen and (min-width: 1101px) { 
#id2 {
display:none !important;
}
}
#id2 {
background-size: cover !important; 
}

    As you see I set the brake point to 1100px to include the ipad at horizontal, but feel free to adjust to suit.
    I also added the background-size code for the image because it was not covering the screen at that size.
    Please clear your browser cache and check.

    Best regards,
    Mike

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