Personal Portfolio Webpage - Build a Personal Portfolio Webpage

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:

do you mean you want to stop people from being able to resize the browser window?
or do you mean you want to limit how small the width of the content in your page will get (use min-width?)

I used this but that doesn’t prevent you from resizing the width of the page below 595px

@media screen and (max-width:595px){
 #navbar-back,html,body {
   min-width:595px ;
   overflow:hidden;
 }

it sounds like you want to fix the browser itself, versus the content.
I don’t think you will be able to do so (to my knowledge).
You just have to make the page look good for all reasonable sizes.

I mean for example when you reduce the width of the freecodecamp forum’s page at a certain point u can’t reduce it further. I assume it’s because their is a min-width for the navbar.

That is what i want to achieve and i don’t understand why it doesn’t work for me .

Edit: nevermind.

As far as I know (and based on some quick testing), there is no way to tell the browser to stop the user from re-sizing it.

You will just have to make your page work for the minimum reasonable size (the size of a cell-phone). Don’t worry about anything else unless you just want to detect the cases when people make the page extra small and handle them.

Alright thank you very much

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