Site starts off zoomed in by 50% when on mobile, not sure why (Nextjs)

I am trying to slowly make my WIP site more responsive, which I have started by applying Kevin's principles for the CRL course regarding the two images in the middle off the screen (MeAndPoco component). It resizes well in my browser dev tools, but on mobile the site seems too zoomed in. The site is available here: https://joseph-d-bradshaw.github.io/personal-site/ The component I assume is responsible is available here: https://github.com/Joseph-D-Bradshaw/personal-site/tree/main/src/app/components/MeAndPoco Has anyone any clue as to why? I am thinking about ripping down the site and started again from a mobile first approach, it was a pain to get the MeAndPoco component to look the way I wanted with purely CSS and keep it responsive.
Welcome!
Welcome to Joseph Bradshaw's personal site
GitHub
personal-site/src/app/components/MeAndPoco at main · Joseph-D-Brads...
Contribute to Joseph-D-Bradshaw/personal-site development by creating an account on GitHub.
17 Replies
Chris Bolson
Chris Bolson7mo ago
Your main issue here is that the main nav bar is not responsive so it is forcing the width.
SoulSkrix
SoulSkrix7mo ago
Thanks for looking, I also thought the same so I isolated a page without the side badge or navbar placeholders and still get weird issues with my portrait (MeAndPoco) component. https://joseph-d-bradshaw.github.io/personal-site/sections/home Maybe I need to consider trying again with a mobile first approach, as it was an after thought..
Welcome!
Welcome to Joseph Bradshaw's personal site
ἔρως
ἔρως7mo ago
the page isn't responsive
No description
SoulSkrix
SoulSkrix7mo ago
I know 😅 I just don’t understand how it pushes off-screen to the left. Normally content overflows to the right. When I take the main URL in my web browser in responsive mode I can make it appear as such.
SoulSkrix
SoulSkrix7mo ago
No description
SoulSkrix
SoulSkrix7mo ago
But not with the other page Not familiar with mobile responsiveness at all.
ἔρως
ἔρως7mo ago
well, i took a quick peek at the css and i ... just stopped it's a big messy mess with absolute units
SoulSkrix
SoulSkrix7mo ago
Yeah it was a very raw WIP (only a few hours), the only component I started doing properly was the MeAndPoco component. I guess I am trying to ask for general advice on making things scale down to mobile nicely and fit
ἔρως
ἔρως7mo ago
in my opinion, since you only spent a few hours, you should make sure it works on mobile first then worry about the layout on the desktop
SoulSkrix
SoulSkrix7mo ago
Aye that’s what I was afraid of hearing, thanks though. I only have a desktop design so I’ll make something up for mobile then and try again.
ἔρως
ἔρως7mo ago
im saying this because of how simple the page is you have a media query that breaks up at 960px, and it is trying to make everything look ok at that size and lower but you dont do things like making sure the text fits
SoulSkrix
SoulSkrix7mo ago
What I was hoping to achieve was to make the text scale down like it did on the homepage with the responsive mode squashing down. So some titles could stay as one liners. Probably not a good idea though.
ἔρως
ἔρως7mo ago
depends on what you want you want bigger text or less vertical space?
SoulSkrix
SoulSkrix7mo ago
About to hop in the car and go to work, but I’ll check later what you’ve said and have a look at remaking the site after work mobile first. I guess I want similar to what you see in the screenshot
SoulSkrix
SoulSkrix7mo ago
No description
SoulSkrix
SoulSkrix7mo ago
Minus the badges and nav which will be mobile replacements There is a lot more to do but I didn’t bother going further since I didn’t get it right this far in.
ἔρως
ἔρως7mo ago
if i were you, i would use the infinite vertical space and make your name a bit bigger this way, you can make the sub-title bigger too and it wont look weird and its a lot easier to layout it
Want results from more Discord servers?
Add your server