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
Your main issue here is that the main nav bar is not responsive so it is forcing the width.
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
the page isn't responsive
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.
But not with the other page
Not familiar with mobile responsiveness at all.
well, i took a quick peek at the css and i ... just stopped
it's a big messy mess with absolute units
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
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
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.
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
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.
depends on what you want
you want bigger text or less vertical space?
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
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.
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