How to disable scrolling on the x-axis.
Basically, I've tried everything and haven't been able to disable the scrolling that is happening on the x-axis on this landing page,
I will provide the GitHub repo if anyone can figure out what I'm doing wrong, I will be very thankful.
https://github.com/nair0501/Minimalistic-website
GitHub
GitHub - nair0501/Minimalistic-website: Creating a minimalistic yog...
Creating a minimalistic yoga studio website . Contribute to nair0501/Minimalistic-website development by creating an account on GitHub.
29 Replies
https://github.com/nair0501/Minimalistic-website/blob/master/index.html#L107
you have invalid html here
not only you have 2 links, one inside the other, which is very bad, you also only close 1 of the links
i don't know if this is what causes whatever behaviour you see, but it is something that needs to be fixed
https://github.com/nair0501/Minimalistic-website/blob/master/index.html#L56
you also don't close the video tags.
the tag
<vide> isn't allowed inside <video> and it doesn't exist.
which is a misspelling of video, given the context
that can cause issuesi actually copied it to this pen, but can't see any overflow/scrolling happening.
indeed, the markup indeed has to be corrected. but that doesn't seem to be the issue
https://codepen.io/MarkBoots/pen/dyEJGxw?editors=1010
i can't replicate it too, but these are serious things that need fixing
and they can cause issues if the assets load
i don't see it causing issues, but, different browsers do things differently sometimes, and it may be a mobile/safari/firefox issue only
yea, sure, absolutely
on mobile you can scroll the menu into view I think switching translate to scale would fix the issue
nice catch. there is a overflow-x hidden on the body for the menu indeed.
that does cause a massive reflow, which isn't good
@nar maybe fork the pen and link it here, so we can look at it. (i will be removing it soon)
First thank you everyone, I should have clarified that the scrolling happens in the mobile version
on an iphone?
yes
that's a very important thing to specify
ohh okay, I'm very new, so sorry for any important things that I leave out
im not rich enough for those devices, so, i can't help you more
but as the others said, i can't replicate it as well
(the problem may be in the difference of rendering engine: iphones use webkit while chrome uses blink, which is a fork of webkit but has changed a lot through the years)
https://codepen.io/nair-agm/pen/PovENzP
did I do it correctly?
?
yup, you did
okay
on your iphone, does the codepen have the same issue?
no, I don't have an iPhone, that was the Chrome dev tools on the mobile settings, but it does happen on my android phone as well
🤔
but you just said it was on an iphone
I meant the Chrome dev tools iPhone view
does this fix the issue ??https://codepen.io/MannixMD/pen/mdYpPOd
that's not an iPhone view, it's simply a preview of what it would look like in that kind of aspect ratio / size. It's closer to how an android phone with Chrome would render the site, but also not 100% the same, and an iPhone with webkit/safari would have different support for features and different implementations for other featurs, so it can be significantly different.
one minute
Okay, let's say it happens for smaller screen sizes, regardless if it's an iPhone or any other phone
knowing the device and browser is extremely important
firefox, chrome and iStuff use different rendering engines, and they have different behaviours with different support for different features
and even the operating system is important
can I ask what have you changed?
the scale?
instead of translate i used scale
I think it did, thank you sooo much
:thumbup: