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
Jochem
Jochemβ€’10mo ago
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?
Dan
Danβ€’10mo ago
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
EIO
EIOβ€’10mo ago
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.
Dan
Danβ€’10mo ago
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
EIO
EIOβ€’10mo ago
Wait, sorry, what's "cp"?
MarkBoots
MarkBootsβ€’10mo ago
cell phone? never have seen that being abbreviated
EIO
EIOβ€’10mo ago
@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 πŸ’«
Dan
Danβ€’10mo ago
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
Jochem
Jochemβ€’10mo ago
Works fine for me on my android phone
EIO
EIOβ€’10mo ago
Okay, I have tested on mine, it works fine too. Maybe share the phone name and browser?
Dan
Danβ€’10mo ago
Oppo A94 nd Brave
EIO
EIOβ€’10mo ago
Also, just curious, which Country?
Dan
Danβ€’10mo ago
Philippines bro
EIO
EIOβ€’10mo ago
Hmm.. Oppo is Android and Brave is Chromium based, so it should be fine too... Maybe a screenshot or screen record?
Dan
Danβ€’10mo ago
https://csalumni.netlify.app/ here bro click that link
EIO
EIOβ€’10mo ago
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.
EIO
EIOβ€’10mo ago
Here
No description
EIO
EIOβ€’10mo ago
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 πŸ™
vince
vinceβ€’10mo ago
Hey this is completely off topic but if you added some neubrutalism design elements to your design it would look super nice
Dan
Danβ€’10mo ago
thanks! it work on my landing page but my problem on the other page its not working
Dan
Danβ€’10mo ago
Dan
Danβ€’10mo ago
@eioluseyi try loging in using email: [email protected] password: bagnas1
clevermissfox
clevermissfoxβ€’10mo ago
I believe there's a feature on visbug (chrome extension) that identifies what is overflowing
Dan
Danβ€’10mo ago
still not working, my deadline is tomorrow'😭😭😭
Jochem
Jochemβ€’10mo ago
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
position: relative;
overflow-x: hidden;
position: relative;
overflow-x: hidden;
@mizacc I'm assuming it's the same issue past the login page, but I can't look at that now
Dan
Danβ€’10mo ago
but when i do that my nav slider will disappear but thanks bro
Jochem
Jochemβ€’10mo ago
that's probably fixable too, but it looks like you removed the netlify page
Skylark
Skylarkβ€’10mo ago
Isn’t the need to hide overflow usually a problem with structure? Just remove what is causing the overflow
vince
vinceβ€’10mo ago
(i was thinking this too but thought i was missing something)
Dan
Danβ€’10mo ago
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😭😭
vince
vinceβ€’10mo ago
Your nav links are overflowing 1 min Did you fix it? I can't reproduce it anymore
Jochem
Jochemβ€’10mo ago
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
Dan
Danβ€’10mo ago
it's okay bro, thanks!!!
EIO
EIOβ€’10mo ago
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
Dan
Danβ€’10mo ago
sadly, no
EIO
EIOβ€’10mo ago
Is the deadline passed?
clevermissfox
clevermissfoxβ€’10mo ago
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
Want results from more Discord servers?
Add your server