I am using AOS to make on-load and on-scroll animations to further enhance my site, but on small screens such as small tablets and phones, certain parts of my website do not show up on the screen, but if I remove AOS from these certain parts of my website, they show up. Why is AOS not working and how can I fix it?
Repl Link: Estus on Replit
BTW, thank you so much @WindLother for introducing me to AOS (I felt I never thanked you properly )
I don’t understand.
For one, I’ve only create 2 themes: one because I like the color blue and one because I was bored.
Secondly, this topic is not at all related to themes.
And finally, I was talking about AOS a library to make things animate on-scroll.
I could not see any AOS in your styles.css, how r u adjusting their settings?
@WindLother Via the HTML.
I couldn’t see any
<style> tag too.
Also, keep styles like AOS separeted from the HTML. So I would recommend transitioning to AOS configuration to the CSS.
On the AOS website, it says I just have to add
data-aos properties to the HTML tags.
Wait, you didn’t initialize the AOS too.
Strange, I tried to ctrl+f and it didn’t show anything. My fault.
So, backing to your problem you can either disable AOS for small screens or use responsive AOS offset.
I think you will make it better looking online, I do know how to disable the AOS for small screens but I can’t get on the top of my head how to make the AOS Offset responsive (as it is more complicated).
Oh, by responsive I mean that the AOS will be responsive to small phones and tablets.
@WindLother Does this mean disabling AOS entirely? Or just making it more mobile-compatible?
If it means making it more mobile-compatible, how would I do this?
Whichever you want, I guess. WindLother said “either”