Best way to fix this?

So If you look in the image I've used inspect element to check responsiveness of my website. Obviously it doesn't look great Kevin had responded to me not to long ago giving me options but I'm still confused what would be the way to go about fixing this issue? I was told it was an overflow issue and that seems correct.
No description
32 Replies
RMON
RMON•9mo ago
Thing that is (could) be causing this would be these containers I've added
No description
Giustomuh
Giustomuh•9mo ago
You should give more context like code or a codepen to see what the problem could be, it looks like the container under it may be the problem but it's hard to know why without reference
RMON
RMON•9mo ago
Apologies I keep forgetting 🤦
Giustomuh
Giustomuh•9mo ago
It's fine ahah
RMON
RMON•9mo ago
Just to warn you, I have a header issue im trying to resolve so if you run into anything weird with that you now know why.
Giustomuh
Giustomuh•9mo ago
I'll give it a look tomorrow now it's 5am here :)
RMON
RMON•9mo ago
You're good man! Good night! or I guess Good Morning?
Giustomuh
Giustomuh•9mo ago
Hey, it looks just fine in my codepen, did you change something?
RMON
RMON•9mo ago
I did, But it wasn't major changes
Giustomuh
Giustomuh•9mo ago
I have no overflow problems
No description
RMON
RMON•9mo ago
Oh so when you use inspect element to check responsiveness (Mobile Size) You can see how everything get's screwed up. The project containers I have and the font-size in the landing page I assume is what's causing it.
Giustomuh
Giustomuh•9mo ago
yes, you are using rem, so mobile view on inspect is strange since it keep the unit size of the broswer
RMON
RMON•9mo ago
Would you recommend I change it to em?
Giustomuh
Giustomuh•9mo ago
im using 4vw here
No description
RMON
RMON•9mo ago
To be honest, I still haven't fully learnt REM/EM it's confusing.
Giustomuh
Giustomuh•9mo ago
ignoring the navbar as you said
RMON
RMON•9mo ago
I need to make the Nav Bar Better 🤦 I just haven't fully figured out the best way.
Giustomuh
Giustomuh•9mo ago
also the two buttons are in a grid but they are not centered, they are in the top left corner
RMON
RMON•9mo ago
Yea I have a lot tweaking to do with this 😭
Giustomuh
Giustomuh•9mo ago
yeah i get you ahah me too on my portfolio i like to vw for font size since it get a nice scaling to it, otherwise you can use a media query to lower the rem
RMON
RMON•9mo ago
I want to figure out a way to somewhat avoid Media Querys and use correct sizing to d the job for me If you have any ways for me to resolve these issues please help.. lol.
Giustomuh
Giustomuh•9mo ago
I guess vw it's your best friend then, this is with 8vw just for an example
No description
No description
Giustomuh
Giustomuh•9mo ago
in the .MN class, font-size you can set some max-height or max-width if you dont want it to get too big
RMON
RMON•9mo ago
Just to let you know so you don't waste time typing it out I ended up fixing the unaligned buttons
Giustomuh
Giustomuh•9mo ago
oh nice! i was typing about rem vs vw
RMON
RMON•9mo ago
No description
RMON
RMON•9mo ago
Ok if you have time could you check out this? https://discord.com/channels/436251713830125568/1207521295365832735
Giustomuh
Giustomuh•9mo ago
im not an expert, but rem are better for normal text, not title like that, vw its better imo because its scale well with the interface, while rem can be changed by user settings and scale too much
RMON
RMON•9mo ago
oh i getchu
Giustomuh
Giustomuh•9mo ago
answered
RMON
RMON•9mo ago
Thank you!
Want results from more Discord servers?
Add your server