This has taken me forever. I’m pretty happy with it though.
1 Like
Just want to make sure there’s no glaring problems I’m missing before I move on to JS…
I’m not quite sure what is going on when I first load the page. I can see some of the content at the top and then a few seconds later it disappears and then it slides back down so I can see everything. Also, at certain widths it doesn’t quite slide down all the way and then a very narrow widths it slides down way too far. Basically, this effect doesn’t seem to be working as you intended.
That’s odd. I’m not getting results like that when I test on various screen sizes.
Hmm, I don’t know what to say. I even fired up my Windows VM and it is happening in FF, Chrome, and Edge there too.
@Roma Thank you for the screenshots. I added a media query for the wide and short dimensions of your first screenshot. The second one is fine. That’s what it should look like in the second screenshot. Can you check how it looks in the screen of the first screenshot?
@bbsmooth I’m at a loss about the “stuttering” of the animation that briefly occurs upon page load. I am wondering if I should just scrap the animation. But I wanted to do something more advanced (and “cool”) for this project.
I just checked it on my phone instead of the simulators that Chrome and Firefox have. The simulators show my phone’s dimensions showing the page fine, but my actual phone does not. That is very disturbing. It makes me not trust the simulators.
Simulator:
My actual phone:
I think your first section is quite problematic. Its great you have done something with animations but it causes too much trouble.
I am a new student here as well so dont take my feedback too serious. But what i ve learned from my struggles with CSS is to take it easy and implement only a few new things each time. Its easier to figure out where it has gone wrong that way (and less depressing).
Do yourself a favor, didge the animation and pick some other “cool” things to work on. Maybe google some button-effects and implement some of those.
Also I see you ve got 100vh on that first section. I could be wrong but in my experience it doesnt work well with alot of content such as that amount of text and arrow you got there, in regard to responsiveness.
Good luck!
I don’t actually mind the animation effect, it just needs to be refined a little. I was able to get it to do what I think you want it to do with some minor changes to the CSS (my codepen version). I did have to make one change that causes the last layout test to fail. This has to do with making the height of the welcome section equal to the view port height. I changed it from height to min-height in order to accommodate the blue arrow since it makes the height of this section taller than the view port height if you have a shorter view port. I think this might actually be a fault in the requirements since that would happen to anyone with a lot of content in the welcome section, so I think ‘min-height’ makes more sense for this requirement.
I just looked at your codepen version. It’s different than what I was going for. What I want it to do is to drop all the way down and for the bottom of the arrow to stop at the bottom of the bottom of the section.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.