Mobile viewport and HTML size

HTML-CSS
1

Hi everyone! I have finally finished making my portfolio but there is one little problem. The site appears zoomed in on small screens. Also while inspecting the site, I found that HTML is not covering the whole page. This HTML problem has haunted me as long as I can remember. I try everything but it just ends up solving itself.
I hope someone will be able to solve this mystery and this zooming problem my site has.

Github Repo: https://github.com/husnain214/Portfolio
Live Site: https://fantastic-khapse-2cca16.netlify.app/

2

  1. What do you mean by it looks zoomed in? I’m not seeing that. How are you testing that using the dev tools or some mobile device? Can you post a screenshot?

  2. That is because of height: 100vh; you have on the body You can use min-height instead.

1 Like
3

That is a great portfolio.

Scaling is a common designing issue in web development. Perhaps make sure to use the correct media query to display font size at comfortable level in devices.

5

Thank you so much. I will look into media queries. :smiling_face_with_three_hearts:

1 Like
6

image
image980×637 29.8 KB

It happens when you shrink the viewport to less than 400px. I am using both dev tools and mobile device for testing. The min height and min width solved the html problem.

1 Like
7

I don’t see a zoom, I do see an overflow. I just looked and for example, the tech-stack section is overflowing. You can just add a flex-wrap to it.

8

thank you I’ll fix it that way

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.