search

bundit / kord

Spotify, Soundcloud, and YouTube all in one website!
https://www.kord.app
MIT License
646 stars 73 forks source link

Horizontal overflow on Landing page #23

Closed Khaoz-Topsy closed 3 years ago

Khaoz-Topsy commented 3 years ago

There is an issue open for this: #17

image

I would like to throw in a possible solution 😅 I got the landing page running locally and removing the width: 100vw; does not break the style of the site. I generally do not like setting overflow-x: hidden, however in this situation it might be a good idea to use it on the landing page as some items fly in from the side, but an easy/quick fix for now is this until myself or someone else looks deeper into a better solution 😅

bundit commented 3 years ago

@Khaoz-Topsy

So removing width: 100vwdoes help some (and is not even necessary since divs are block elements. Idk what I was thinking haha).

I think the issue is caused by the 'aos' library I'm using for the animations because as you said, there are elements flying in from the sides and if you visit https://www.kord.app and check the horizontal scrollbar on mount there is space left as shown in the screenshot in #17. But if you scroll all the way down and let all the elements animate then the scrollbar shows that there is not space to the right anymore.

Khaoz-Topsy commented 3 years ago

Yeah you are 100% right. I think it is time to use overflow-x: hidden. I will take a quick look and update this PR when I have a better solution 😋

Khaoz-Topsy commented 3 years ago

It wasn't too complicated, just added overflow-x: hidden to the .p2 class. No more horizontal scrollbar 💪

bundit commented 3 years ago

@Khaoz-Topsy merged! Thanks for contributing

Issue #17 Closed