Jump to content
Search Community

Element with full height can't be seen completely

Mohit Pain test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello everyone,

I'm new to GSAP, so I'm trying to learn every day. My main concern is that I have applied a ScrollTrigger on an element for mobile devices. However, when I scroll down to other elements, I can't see the remaining part of the last element; I can see up to 90% of the last element, and the remaining 10% is hidden at the bottom.

For example, you can see in this video that I uploaded on YouTube. On the first element, I have applied the ScrollTrigger, and after scrolling down, just focus on the last yellow box. You will notice that the remaining part is hidden. But when I inspect my code and choose an Android device in inspect mode and select 50% zoom, I can see the full height of that yellow object. Why am I not able to see the complete texts of that object at 100% zoom?

 

i have given my js code that it no html and css. can please tell me the solution

 

 

 

See the Pen eYaVoRN by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

Edited by Mohit Pain
Link to comment
Share on other sites

  • Mohit Pain changed the title to Element with full height can't be seen completely
  • Solution

Hi,

 

I believe that the zoom in devtools device section doesn't mean the zoom on the elements like a two finger scale up, it means adjust the size of the device simulation to either fit the screen or not (as said at the bottom of the dropdown: Fit to window and Auto-adjust zoom options).

 

I think the reason why you can't see all the yellow section is because you have a fixed top bar with a higher z-index value so the part of the yellow section that is not visible is equal to that height. You have two options, give the yellow section a padding top equal to that height (which could look a bit odd) or use calc and a CSS variable to set the height of every section you need to behave like that:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

https://developer.mozilla.org/en-US/docs/Web/CSS/var

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

4 hours ago, Rodrigo said:

Hi,

 

I believe that the zoom in devtools device section doesn't mean the zoom on the elements like a two finger scale up, it means adjust the size of the device simulation to either fit the screen or not (as said at the bottom of the dropdown: Fit to window and Auto-adjust zoom options).

 

I think the reason why you can't see all the yellow section is because you have a fixed top bar with a higher z-index value so the part of the yellow section that is not visible is equal to that height. You have two options, give the yellow section a padding top equal to that height (which could look a bit odd) or use calc and a CSS variable to set the height of every section you need to behave like that:

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

https://developer.mozilla.org/en-US/docs/Web/CSS/var

 

Hopefully this helps.

Happy Tweening!

But sir, at 50% and 75%, it looks fine and I can see everything in the yellow box. Does that mean my site will be responsive for that mobile screen? Because at 100%, I'm not able to see some information in the yellow box, but when I select 75% or 50%, I can see all the information as I want. for me just rewatch the video sir at the starting of the video i have selected 50% and later 75% and later 100%. please tell me it will be responsive right? because my client will watch it on his mobile. so i'm nervous. i can understand that some of the information of yellow section is hidden because of the navbar, but my problem is not at the top it is at the bottom of the yellow section at 100% i can only see 95% of the content. and remaining information is hidden..   for me sir please watch the video again, i'm ok with the 50% and 75%, so it will be perfectly fine on mobile phones?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...