Avatar of David Schure
David Schure
 asked on

Image/video dispappears on scrolling

I'm having an issue viewing the index page on a cell phone in portrait/landscape mode.  There is a space between the image/video and the title "Angela Goes Deep" (also an image)  In edition to a space the image/video disappear completely when you start to scroll down.   Works fine on a laptop when I resize the window.

https://angelahunte.com/index.html

Misty

2121

CSS

Avatar of undefined
Last Comment
David Schure

8/22/2022 - Mon
Scott Fell

@media (max-width: 540px)
#video {
    display: none;
}

Open in new window

lenamtl

Hi,

Using Bootstrap v3 this is good to know that:

Some utilies classes can show / hide content
https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide

Some other utilities classes that show/hide content based on media queries
https://getbootstrap.com/docs/3.4/css/#responsive-utilities
David Schure

ASKER
Okay, thank you. Very confused.  Not sure what is causing the space below the image and the disappearence of the image / video when you scroll. This is a mobile issue only. Works fine on the desktop.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Scott Fell

Are you seeing what I have? 
Scott Fell

I am sorry, I think I mislead you.

The issue is the breadcrumb area seems to not contain anything, yet is controlled by your css.  

If you take the full-bg div and move it above the breadcrumb row (hide not on mobile), then hide the entire breadcrumb row you will have below.



David Schure

ASKER
Please see this for the issue.  This is on my iphone. Notice the space. Notice how the image disappears.
Mobile Display.MP4
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
lenamtl

Hi,

First I would try to avoid inline CSS because this usually break the Bootstrap logical.

So instead of using  style=... use one of the utilities classes
So don't use
style="display: none;"

Open in new window

 And use one of these depend of the case...

Some utilies classes can show / hide content
https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide

Some other utilities classes that show/hide content based on media queries
https://getbootstrap.com/docs/3.4/css/#responsive-utilities 

Now when you have a show/hide issue search the code on you page and spot all
style="display: none;"

Open in new window

If there is no result found then check if one of the  utilities classes is use
<div class="show">...</div>
<div class="hidden">...</div>

Open in new window

or other possible class name * would be replace by column number
visible-xs-*   
visible-sm-*   
visible-md-*   
visible-lg-*   
hidden-xs   
hidden-sm   
hidden-md   
hidden-lg

Open in new window

David Schure

ASKER
Hi, I did a complete search....nothing found on the page.
lenamtl

Also check on embed file like php include
also this can be in Javascript / plugin sometimes

if you use Notepad++
you can search in all project file using CTRL+ F and Find in File tab
Your help has saved me hundreds of hours of internet surfing.
fblack61
David Schure

ASKER
Still looking!

Scott Fell

Yea, that space is the breadcrumb area.  The reason it disappears is that it is just scrolling up.

Can you verify that when you use the browser dev tools you get the same view as I did, then when you try it live it is the same or different on the phone?

First I would try to avoid inline CSS because this usually break the Bootstrap logical. 
True, but this is only for testing.


David Schure

ASKER
The problem is only on the phone. When I reduce the window on the laptop no problems.

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Scott Fell

I understand that.  You will use media queries or the bootstrap helper classes to show and hide https://getbootstrap.com/docs/3.4/css/#helper-classes-show-hide based on the viewport.

But right now, we are just focusing on the mobile version.  
Scott Fell

If you can make the updates I showed, you and test on mobile, then we can make it work for both.
lenamtl

Hi,
For example you have this class on your page head that may hide the video in smaller view
@media (max-width: 540px) {
  #video {
    display: none;
  }
  #full-bg {
    display: block;
  }
}

Open in new window

Put all class that you have in the head of your page and  put those in external CSS file and place this file link after the Bootstrap CSS link.

Also you have some error into the console that you may want to fix
Unable to preventDefault inside passive event listener due to target being treated as passive
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
David Schure

ASKER
.....I'm getting blurry eyed.  Basicall the image replaces the video on portrait mode on the cell phone. That works. The two isuues that I'm having, both on the mobile is the space under the image and the image disappearing when you go down on the page.
Scott Fell

Let's just focus on mobile. Forget about the desktop view for now.  

As I asked a few comments ago, https://www.experts-exchange.com/questions/29230239/Image-video-dispappears-on-scrolling.html#a43371759  Can you confirm if you make the changes I recommended that it works as expected on mobile in both the browser console as I have shown and on the actual phone. Don't worry about how it looks on desktop, we can work with that and put things back together.

lenamtl

I cannot reproduce on my side but from your video printscreen
I suspect the issue you have is related with the script you are using for the scroll to top and the script with sticky menu
and  z-index

do you have same issue with other images on this page?

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
David Schure

ASKER
If you go to the This IS Angela page. It works fine. Except for that space once again.  But the image stays there.
David Schure

ASKER
This fixed the disappearing image. I removed it.
phone-menu-bg

Open in new window

Scott Fell

When you say it works, do you mean the space between the bottom image and the text?  You have this page coded differently than the index page. 

The other page is the breadcrumb class that is creating that extra space. That is why my suggestion is to get rid of it on mobile and show the image in it's own row.


Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Scott Fell

I just caught the issue.


You have the height of the breadcrumb set to 812px.  





David Schure

ASKER
YUP! How do I access it? And what do I change it to?
<!-- =============== START BREADCRUMB ================ -->
   <section class="no-mb">
        <div class="row">
            <div class="col-sm-12">
                <!--div class="breadcrumb-fullscreen-parent phone-menu-bg"-->
                <!--div class="breadcrumb-fullscreen-parent"-->
               <div>
                    <!--div-->
               <div class="breadcrumb breadcrumb-fullscreen alignleft small-description overlay almost-black-overlay" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="0">                         
                   <div id="video">
                       <video id="background-video" width="400" controls autoplay loop muted>
                       <source src="videos/Mango20228.mp4">
                            Your browser does not support HTML5 video.
                     </video>
                  </div>

                  <div id="full-bg">
                       <img src="assets/img/home/Angela3.png">
                  </div>
                    </div>
            </div><!--end bread  -->
            </div>
        </div>
    </section>
   <!-- =============== END BREADCRUMB ================ -->

Open in new window

ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
David Schure

ASKER
Okay almost there!  Everything works. Except when I turn my phone in landscape mode.
<style>
#video video{
    width:100%;
}
</style>
<section class="visible-xs visible-sm">
            <div>
                <img src="assets/img/home/Angela3.png">
                </div>
   </section>
   <section class="nb hidden-xs hidden-sm">
         <div id="video">
                       <video id="background-video" width="400" controls autoplay loop muted>
                       <source src="videos/Mango20228.mp4">
                            Your browser does not support HTML5 video.
                     </video>
         </div>
   </section>

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
David Schure

ASKER
Thank you so much...this was a tuff one!
Scott Fell

Did you get it figured out as far as the landscape mode?
David Schure

ASKER
yes thank you. i changed the breakpoint to 540 and that worked. once again thank you for your help.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23