如何在移动设备上解决简单 html/css 网站的缩放问题

Question

I recently created a website in order to serve as a portfolio of sorts for any future projects that I complete during University. I self-taught myself Html/CSS to create the web-page so obviously the code itself is probably pretty poor quality. I'll probably be creating a new website when I learn React.js, but for now this is what I have.

The link is: https://etnwang.github.io/

The files can be found at https://github.com/eTNwang/eTNwang.github.io

I think the page looks decent on a desktop, but it completely breaks apart on mobile. I did my best to utilize percentages of width and height whenever possible and vh instead of px. However, it still looks horrendous. I added the line

    <meta name="viewport" content="width=device-width, initial-scale=1">

but it didn't do anything for the site.

Anyone have any idea how to fix the mobile scaling issue?

On desktop:

looks decent

On mobile:

terribleness

Answer 1

You got a nice setup at start, where you position your elements in two different blocks with flex. Nameblock as 60% width and your imgage with 40% width. However this gets really small on mobile. I would reccomend in your case to add a different flex direction when the window gets smaller than 600px (for example). And then also change your padding left as you want to position the image.

@media (max-width:600px){ 
    .flex-container {
     flex-direction: column;
  }
.img img{ 
     padding-left: 15vh;
  } 
.nameblock{
     width:90%;
     margin: auto;
     padding-left:0;
  }
}