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.
Yea my point was that didn’t take us to the code it take us to the website that was why i said the link was wrong…
Oh no that was the link to the example project it wasnt meant to take you to my code. I was trying to explain that I am having trouble understanding the inspect element tool to view the code for any given website. I can’t seen to view certain aspects of the code. wondered if anyone had any resources for that. For example in terms of the example project for this challenge I cant find the code that specifies the grow shrink action that is happening in the portfolio section with all the different link. Ill link an image of the section im talking about.
I cant seem to get it to scale proportionally with min and max width and height. What am I doing wrong here?
Also another question. Can you understand why everything in the .port-container i.e. all the green boxes are overflowing into the contact section when the view port is very narrow?
<!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" id="navbar">
<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;
flex-flow:row-wrap;
align-items:stretch;
}
.h2{
display:flex;
justify-content:center;
padding-top:10px;
}
.social-work{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
flex:1 0 auto;
}
.shoes-i-worn{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
display:flex;
flex:1 0 auto;
}
.celebrities{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
display:flex;
flex:1 0 auto;
}
.clothing-brands{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
display:flex;
flex:1 0 auto;
}
.modeling-jobs{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
display:flex;
flex:1 0 auto;
}
.my-family{
background-color:#9FFA42;
min-height:300px;
min-width:300px;
max-height:500px;
max-width:500px;
border-radius:10px;
display:flex;
flex:1 0 auto;
}
.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;
}
hey at here
you will use display grid and use grid property at the place of flex
