overlflow-x mobile
can anyone help me, on my mobile it is still overflowing in x i even put overflow-x hidden to my body and still doesn't work 😭 here is the code pen https://codepen.io/danilocasim/pen/MWxQJwd
37 Replies
without your code, it's going to be hard for people to help
share a live version if you can, either in codepen or just on netlify like it seems to be already?
mb bro but here it is https://codepen.io/danilocasim/pen/MWxQJwd
it's okay in built-in cellphone mode in pc browser but when i try in in my cp it still overflowing x
Hi @mizacc, I'm really struggling to see the x overflow on your implementation.
I just tested the codepen and it works just fine. Very responsive.
in cp bro, it does overflow x to my cp and the pop up image take over the whole because i did the image with percentage so it takes up the whole with the overflow x page
Wait, sorry, what's "cp"?
cell phone? never have seen that being abbreviated
@MarkBoots looool.. Exactly what I was thinking.
Well, @mizacc what ever the case, just spell the things out so we can help you find your solution 💫
mbmb, cellphone bro
in my country, it was normal for a cellphone to be called cp
this, i want to know how to lock the overflow to not scroll horizontally
Works fine for me on my android phone
Okay, I have tested on mine, it works fine too.
Maybe share the phone name and browser?
Oppo A94 nd Brave
Also, just curious, which Country?
Philippines bro
Hmm.. Oppo is Android and Brave is Chromium based, so it should be fine too...
Maybe a screenshot or screen record?
https://csalumni.netlify.app/
here bro
click that link
Ohhhh!
Finally!
That's really weird
@MarkBoots @Jochem to replicate on Desktop, set your device to mobile.
Not just the responsive screen, but like device type.
Here
Well, I found your fix!
I believe 😄
You would need to add
overflow: hidden; to your .wrapper div
I don't know why the overflow property on the body is respected on a desktop view port and not mobile.
I have never encountered this before, so I can't tell you the reason behind it, but I tested the solution I gave you and that seems to work just right.
@MarkBoots @Jochem If you have any insight on this, I'd love to hear it too 🙏Hey this is completely off topic but if you added some neubrutalism design elements to your design it would look super nice
thanks! it work on my landing page but my problem on the other page its not working
@eioluseyi try loging in using email: [email protected] password: bagnas1
I believe there's a feature on visbug (chrome extension) that identifies what is overflowing
still not working, my deadline is tomorrow'😭😭😭
after some puzzling, it looks like the overflow on the login page is caused by the nav being translated off to the side
quickest fix is to add this to your nav
@mizacc I'm assuming it's the same issue past the login page, but I can't look at that now
but when i do that my nav slider will disappear
but thanks bro
that's probably fixable too, but it looks like you removed the netlify page
Isn’t the need to hide overflow usually a problem with structure? Just remove what is causing the overflow
(i was thinking this too but thought i was missing something)
csalumni.netlify.app
@Jochem bro i rename the page because my tc told me to
i would really appreciate it if you help me with thiss😭😭
Your nav links are overflowing
1 min
Did you fix it?
I can't reproduce it anymore
it's on the login page https://csalumni.netlify.app/login still
it's fixed by setting the nav to position: relative and overflow hidden, but that causes the UL with navlinks to be hidden in the nav bar even when expanded
I'm not sure off the top if my head how to fix this the easiest though, and I don't really have time to look at it right now
it's okay bro, thanks!!!
Hi @mizacc
I'm so sorry, I've been busy since our last conversation.
Please, have you been able to fix the issue?
I couldn't tell from the conversation
sadly, no
Is the deadline passed?
Visbug is helpful, the browser poly pane can identify overflowing items or you can throw outlines on elements one by one and see what’s pushing outside of the outline. Lots of times overflow is due to not using fluid text and the font-size is too big it’s pushing everything over