Personal Porfolio

Hey alle,
Im having trouble getting certain information out of the inspector(accessibility properties). I don’t understand where the code is that is making the link/images grow and shrink when you expand the viewport on this demo project. It seems that there are certain things im not getting about the accessibility properties because there are often aspects when viewing the website through the viewport that I dont see in the code.

https://personal-portfolio.freecodecamp.rocks

here is my code so far

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>portfolio</title>
<link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="nav-house">
  <nav class="nav-bar">
    <ul class="nav-items">
      <li id="about">
        <a href="#welcome-section">About</a>
      </li>
      <li id="work">
        <a href="#projects">Work</a>
      </li>
      <li id="contact">
        <a href="#contact-info">Contact</a>
      </li>
    </ul>
  </nav>
  </div>
  <!--section-1-->
  <div class="welcome-container">
  <div id="welcome-section">
  <h1>Hi, my name is</h1>
  <p>what?<p>
  </div>
  </div>
  <!--end-sec-1-->
  <!--beg-sec-2-->
  <div class="projects-container">
  <div id="projects">
    <h2 class="h2">This is my life and work</h2>
    <div class="port-container">
    <div class="social-work">
    </div>
    <div class="shoes-i-worn"></div>
    <div class="celebrities">
      </div>
      <div class="clothing-brands"></div>
      <div class="modeling-jobs"></div>
      <div class="my-family"></div>
      </div>
  </div>
  </div>
  <!--end-sec-2-->
  <!--contact-sec-->
  <section id="contact-info">
    <h2>Lets work together</h2>
    <p>you can contact me on these platforms</p>
  </section>
  <section id="contact-info-2">
    <a class="btn-fb" href="https://www.facebook.com/" target="blank">
      Facebook
    </a>
    <a class="btn-gthb" href="https://github.com/" target="blank">github</a>
    <a class="btn-gthb" href="https://x.com/" target="blank">X</a>
    <a class="mail-btn" href="mailto:example@example.com">Send a mail</a>
    <a class="btn-call" href="tel:555-555-5555">call me</a>
  </section>
  <!--end-con-sec-->
</body>
</html>
#welcome-section{
  background-color:gray;
  height:600px;
  display:flex;
  flex-direction:column;
  text-align:center;
  justify-content:center;
  width:100%;
  margin:0;
  padding:0;
}
.welcome-container{
  display:flex;
  justify-content:center;
}
#projects{
  background-color:#6699FF;
  width:100%;
  height:1600px;
}
.projects-container{
  display:flex;
  justify-content:center;
}
.h2{
  display:flex;
  justify-content:center;
  padding-top:10px;
}
#img-1{
  max-size:50px;
  width:100vh;
  height:auto;
}
.social-work{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
flex-basis:300px;
display:flex;
}
.shoes-i-worn{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
flex-basis:300px;
display:flex;
}
.celebrities{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
flex-basis:300px;
display:flex;
}
.clothing-brands{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
flex-basis:300px;
display:flex;
}
.modeling-jobs{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
flex-basis:300px;
display:flex;
}
.my-family{
  background-color:#9FFA42;
  height:300px;
  width:300px;
border-radius:10px;
display:flex;

}
.port-container{
  padding:0;
  padding:10rem 2rem;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px;
}
@media (max-width 1060px) and (min-width: 500px) {
  .my-family{
    height:75%;
    width:;
  }
} 
.nav-items{
list-style:none;
color:white;
display:flex;
justify-content: flex-end;
padding-right:55px;
}
.nav-bar{
  height:60px;
  width:100%;
  margin:0;
  padding:0;
  top:0;
background-color:black;
  position:fixed;
}
#about{
  padding-right:15px;
  
}
#work{
padding-right:15px;
}
#contact-info{
  width:100%;
  height:500px;
background-color:brown;
top:0;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
#contact-info-2{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  height:100px;
  align-items:center;
  background-color:brown;
  background-clip:border-box;
  border:5px solid #B47A78;
}

Hello @taktilemechanic1,
The link you put was incorrect

The link have a typo maybe check the link!

Quick note, you have a couple problems here:

I don’t see an #img-1 element anywhere in the document, and max-size is not a valid property. You can use max-width and max-height, however.

Since you are using flexbox, you might want to look into the flex-grow property. If you use this in combination with min-width, max-width, and aspect-ratio, you can probably achieve the responsive size scaling you are looking for.

For a quick test, change your .social-work stylings to this, and see how it changes the responsiveness.

.social-work{
  background-color:#9FFA42;
  min-width: 300px;
  max-width: 500px;
  height: 300px;
  flex-grow: 1;
  border-radius:10px;
  flex-basis:300px;
  display:flex;
}

I will leave it up to you to implement min-height and aspect ratio so that it scales proportionally in the vertical direction as well.

The template portfolio that you linked uses Grid instead of Flexbox, so it will be a different implementation that is specific to that display format.