Hi, i tried to replicate the reference portfolio but i can’t find how to make my website width not resizable past a certain width. I made a media query but its not working like i wanted to.
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='styles.css'>
</head>
<body >
<div class='scroller'>
<section id='welcome-section'>
<h1>
Hey I am Mimic
</h1>
<p>a web developer</p>
</section>
<section id='projects'>
<h1>These are some of my projects</h1>
<div id='container'>
<a href='https://codepen.io/freeCodeCamp/full/zNqgVx'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg'><div class='project-title'><p><i>< </i>Tribute Page<i> / ></i></p></div></div></a>
<a href='https://codepen.io/freeCodeCamp/full/qRZeGZ'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'><div class='project-title'><p><i>< </i>Random Quote Machine<i> / ></i></p></div></div></a>
<a href='https://codepen.io/freeCodeCamp/full/wgGVVX'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'><div class='project-title'><p><i>< </i>JavaScript Calculator<i> / ></i></p></div></div></a>
<a href='https://codepen.io/freeCodeCamp/full/mVEJag'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg'><div class='project-title'><p><i>< </i>Map Data Across the Globe<i> / ></i></p></div></div></a>
<a href='https://codepen.io/freeCodeCamp/full/wGqEga'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png'><div class='project-title'><p><i>< </i>Wikipedia Viewer<i> / ></i></p></div></div></a>
<a href=''https://codepen.io/freeCodeCamp/full/KzXQgy'><div class='project-tile'><img class='project-image' src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png'><div class='project-title'><p><i>< </i>Tic Tac Toe Game<i> / ></i></p></div></div></a>
</div>
<div id='show-all-button'>
<a href='https://codepen.io/FreeCodeCamp/'><p>Show all</p><div id='12'> ></div></a>
</div>
</section>
<section id='end-section'>
<div class='c'>
<div>
<h1>Let's work together...</h1>
<p class='a-1'>How do you take your coffee?</p></div>
<ul>
<a id='profile-link' class='facebook'><li>Facebook</li></a>
<a id='profile-link' class='GitHub'><li>GitHub</li></a>
<a id='profile-link' class='Twitter'><li>Twitter</li></a>
<a id='profile-link' class='Send'><li>Send a mail</li></a>
<a id='profile-link' class='call'><li>Call me</li></a>
<div id='none'></div>
</ul></div>
<div class='footer'>
<p class='p1'>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
<p class='p1'>© Created for freeCodeCamp</p>
</div>
</section>
<div id='navbar-back'></div>
<nav id='navbar'>
<ul>
<li><a href='#welcome-section'>About</a></li>
<li><a href='#projects'>Work</a></li>
<li><a href='#end-section'>Contact</a></li>
</ul>
</nav>
</body>
</html>
*{
/*outline: 1px black dashed;*/
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior: smooth;
}
body{
width:calc(100vw );
height:100%;
}
.scroller{
height:100%;
scroll-padding:60px;
overflow-y:scroll;
scroll-snap-stop: always;
scroll-snap-type: y proximity;
}
.scroller section{
scroll-snap-align: start;
}
nav ul{
display:grid;
grid-template-columns:repeat(3,auto);
}
nav ul li{
grid-row:1;
list-style:none;
color:#f0f0f0;
font-size:25;
padding:0 20px;
height:60px;
padding-top:15px;
}
nav{
position:fixed;
top:0;
right:30px;
height:60px;
width:auto;
}
#navbar-back{
background-color:#be3144;
width:100vw;
height:60px;
position:fixed;
top:0;
box-shadow: 0px 2px rgba(0, 0, 0, 0.6);
}
#welcome-section h1{
font-size:40;
height:50;
color:#f0f0f0;
}
#welcome-section p{
font-size:24;
height:40;
color:#be3144;
font-style:italic;
}
#welcome-section{
height:calc(100vh - 60px);
margin-top:60;
padding-top:calc(50vh - 90px);
background:linear-gradient(45deg,#393c3f,#19181a)
;
text-align:center;
}
#projects{
min-height:calc(100vh - 60px);
max-height:auto;
text-align:center;
background-color:#45567d;
font-size:25
}
#projects h1{
color:#f0f0f0;
text-decoration:underline;
padding:20
}
.project-tile{
max-height:500;
}
#container{
display:grid;
grid-template-columns:minmax(0px, 320px) minmax(0px, 320px) minmax(0px, 320px);
gap:20px;
justify-content:center;
grid-template-rows:minmax(0px, 400px) minmax(0px, 400px);
background-color:#45567d;
padding:20
}
#container a {
text-decoration:none;
color:#f0f0f0;
}
.project-tile{
box-shadow:1px 0px 2px rgba(0, 0, 0, 0.2)
}
.project-title{
border-radius:0px 0px 3px 3px;
box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)
}
#container a:visited{
color:#f0f0f0
}
.project-image{
height:calc(90% );width:100%;
object-fit:cover;
}
.project-title{
height:calc(10% );
background-color:#303841;
display:grid;
align-items: center;
}
.project-title p{
text-align:center;
color:#f0f0f0;
font-size:calc(15px + 0.1vh )
}
.project-title p i{
color:#303841;
transition:0.5s
}
#container a:hover .project-title p i{
color:#ff7f50;
transition:0.5s
}
#show-all-button{
display:grid;
background-color:#45567d;
justify-content:center;
padding:20px
}
#show-all-button p{
background-color:#303841;
color:#f0f0f0;
width:150px;
text-align:center;
padding:5px;
transition:0.5s;
padding-right:26px;
}
#show-all-button div{
font-weight:900;
transform:translate(110px,-32.5px);
transition:transform 0.5s;
color:#f0f0f0;
width:25px
}
#show-all-button p:hover {
background-color:#be3144;
transition:0.5s
}
#show-all-button div:hover{
transform:translate(113px,-32.5px);
transition:transform 0.5s
}
#show-all-button p:hover + div{
transform:translate(113px,-32.5px);
transition:transform 0.5s
}
#show-all-button a{
height:38.9px;
text-decoration:none;
}
#end-section{
height:calc(100vh - 60px);
background-color:#303841
}
#end-section h1,#end-section p:not(.p1){
color:#f0f0f0;
text-align:center;
}
#end-section h1{
font-size:48px;
padding-bottom:10px;
}
.a-1{
font-size:15px;
font-style:italic
}
#end-section ul{
color:#f0f0f0;
display:grid;
grid-template-columns:repeat(5,auto);
list-style:none;
gap:30px;
justify-content:center;
}
#end-section ul a{
font-size:25px;
transition:0.5s;
text-shadow:3px 1px #202021
}
.c{
display:grid;
align-content:center;
gap:40px;
width:100%;
height:calc(90vh - 60px)
}
#end-section ul a:hover{
transform:translateY(5px);
transition:0.5s
}
.footer{
height:calc(10vh );
border-top:4px solid #be3144;
display:grid;
grid-template-columns: 80% 18%;
align-items:center;
gap:0px;
padding:2vh;
}
.p1{
text-align:start;
font-size:calc(15px + 0.390625vw);
color:#f0f0f0;
padding-left:20px
}
#navbar a {
text-decoration:none;
color:#f0f0f0
}
#navbar a:visited{
color:#f0f0f0
}
#navbar ul li:hover{
background-color:#45567d;
}
@media screen and (max-width:595px){
#navbar-back,html,body {
min-width:595px ;
overflow:hidden;
}
#welcome-section{
min-width:578px;
}
nav{
position:fixed;
top:0;
right:97.5px;
height:60px;
min-width:400px;
justify-content:center;
}
nav ul{
display:grid;
grid-template-columns:repeat(3,100px);
align-content:center;
justify-content:center;
}
nav ul li{
grid-row:1;
list-style:none;
color:#f0f0f0;
font-size:25;
padding:0px;
height:60px;
padding-top:15px;
text-align:center;
}
#container{
display:grid;
grid-template-columns:minmax(0px, 320px) ;
gap:20px;
justify-content:center;
grid-template-rows:minmax(0px, 400px) minmax(0px, 400px);
background-color:#45567d;
padding:20
}
#projects{
height:auto;
text-align:center;
background-color:#45567d;
font-size:25
}
#end-section h1{
font-size:38px;
padding-bottom:10px;
}
.a-1{
font-size:15px;
font-style:italic
}
#end-section ul{
color:#f0f0f0;
display:flex;
flex-wrap:wrap;
list-style:none;
gap:10px;
}
#end-section ul a{
font-size:25px;
transition:0.5s;
text-shadow:3px 1px #202021;
text-align:center;
margin:15px;
}
.c{
display:grid;
align-content:center;
gap:40px;
width:100%;
height:calc(90vh - 60px)
}
#end-section ul a:hover{
transform:translateY(5px);
transition:0.5s
}
.footer{
height:calc(10vh );
border-top:4px solid #be3144;
display:grid;
grid-template-columns: 80% 18%;
align-items:center;
gap:0px;
padding:2vh;
margin-right:10px;
}
.p1{
text-align:start;
font-size:calc(15px);
color:#f0f0f0;
padding-left:10px
}
}
@media screen and (max-width:840px) and (min-width:595px){
#container{
display:grid;
grid-template-columns:minmax(0px, 320px) minmax(0px, 320px) ;
gap:20px;
justify-content:center;
background-color:#45567d;
padding:20
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: