I have created an interaction in the hero section of the homepage of my site which consists of three separate text elements rising upwards to reveal themselves, and then zooming out. It was working fine, but I have just noticed that the third element (‘heading 3’) is cut off at the bottom of the div as if the size of the Dif is too small for the text. I’ve checked as many settings as I can think of to see what the problem is but I can’t find anything. Does anyone know why this is happening? Thank you
Hi @sarwech, thank you for such a speedy reply Credit for the design goes to https://www.garycolwell.net, I just adapted a cloneable site he published on the Showcase.
With the cutting off, it seems to only be at certain problem that I’m having this issue. When I resize a browser window from narrow to wide, the third line seems to come in and out of the div limits (if that makes sense). I’ve attached a screenshot to hopefully show better what I mean. Thanks
Gotcha! Then it looks like the parent element of Heading 3 (the 3rd line) is cutting off the content. Check the overflow settings of the Heading Div 3. If you set it to “Visible” (selected below) it should fix the issue.
I’ve just tried it and Heading 3 is no longer cut off.
Hi @sarwech, thank you. I’ve just tried that but I’m actually relying on the hide overflow function as part of the animation. Each of the three text elements slide upwards from outside the limits of their respective divs.
The fact that setting the overflow settings to ‘visible’ does technically solve the problem, is why I’m confused actually, because it should mean that the parent div is smaller than the child text element and therefore is cutting it off. However, even when I increase the size of the parent div, the text element still gets cut off
Ok, as I type I am also thinking (), and I thought I should try just increasing the size of the parent div, even though on the designer it looks like the text element is clearly within it, and it worked! Your comments got me thinking along those lines so thank you for that!
I have noticed a slightly different problem now though that you may have some insight on - while all three of the text elements are correctly within the hero section across all breakpoints in the designer, when I go to the live site (www.thebergdesign.com) the third element now finishes the animation over the section below it, even though there is enough space in the designer for this not to happen. Do you have any thoughts? Thanks again
Credit for the design goes to 
), and I thought I should try just increasing the size of the parent div, even though on the designer it looks like the text element is clearly within it, and it worked! Your comments got me thinking along those lines so thank you for that!