Personal Portfolio - Can't set the right height for viewport

HTML-CSS
1

Hi. I am having trouble working out why the ‘viewport height’ userstory isn’t working in testing. Also, I am having a strange issue that I can’t click any elements in my navbar.

any help much appreciated.

Your code so far
<!doctype html>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&effect=shadow-multiple:ital@1&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@700&display=swap" rel="stylesheet">

<meta charset="utf-8">
<title>DBB Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
h1 { font-size: 36px; font-family: 'Poppins', sans-serif; text-align: center; color:blue; } p.atest { font-size: 18px; color:brown; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif } p.centtest { font-size: 18px; color:rgb(255, 0, 0); font-family: 'Gemunu Libre', sans-serif; padding: 5px; } .centtext { text-align:center; } body:before { background:url("bg1.jpg"); display: block; content:""; position:absolute; z-index:-1; top:0; left: 0; right: 0; opacity: .2; min-height: 100%; } .container { height: 620px; position: relative; border: 1px rgba(255, 255, 255, 0) } .center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .container1 { display: flex; flex-direction: row; width: 90%; margin:auto; column-gap: 10px; } .project-tile { width: 33%; margin: auto; height: auto; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(67, 75, 109); } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgb(255, 28, 28); } @media only screen and (max-width: 600px) { body { background-color: lightblue; } } 
    <nav style="position:fixed" id="navbar">
        <ul>
            <li><a href="#projects">Projects</a></li>
            <li><a id="profile-link" target="_blank" href="https://www.freecodecamp.org/fcce28118fa-b833-49cb-849c-a1aa1dcb9aa6">Code Camp Profile</a></li>    
        </ul>

    </nav>

    <div class="centtext container">  
        <div class="center">
    <h1>Dom's Project Portfolio</h1>
    <br>
    <br>
   
    <p class="atest">
        This is my online project portfolio from <a href="https://freecodecamp.org">freecodecamp.org</a> and a couple of sites I have done or am still working on.
    </p>
</div></div>  

    
</section>

<section id="projects">

    <div class="container1" id="tile1">
        <div class="project-tile">
        <p class="centtest">So I learned to use Joomla before knowing html or css very well and relied on extensions and artisteer for templates. I have decided I would like to know about the nuts and bolts of the whole webdesign thing, so I am working through freecodecamp.org and other webdev resources on the web!</p>
        <p class="centtest">This is a joomla site I made. <a href="https://southernobedienceclub.com">Southern Obedience Club</a> </p>
        <img src="Screenshot.png")</img>
    </div>
    </div>




</section>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

Please give us a link to your project instead of copy/pasting your code in here. It will make it much easier to help you if we can look at the real thing for ourselves.

3

thnx for response.

Here is a link to the pen.

4

You should move the CSS into the CSS editor (and you don’t need the <style> tags in there). Also, in codepen you don’t want all of the tags before, and including, <body>. Codpen puts all of those in there for you automatically. You can add <link>s and such that go in the <head> by clicking on the gear icon in the upper right of the HTML editor.

As for the test that is not passing, the height of the welcome section needs to be the height of the view port but you have hardcoded the height to 621px. So unless your browser is exactly 621px tall at the time then this test will fail :slight_smile: Do you know of any units you could use that would allow you to size the welcome section based on the height of the view port? If not, how do you think you would google to find such units?

5

Hi again, so thank you so much to bbsmooth. I found out about units I had not used before (vh in this case). I have made the pen pass but I can’t get the formatting right? can someone have a look and see where I’m going wrong?

link here: https://codepen.io/dominic-blue/pen/RwZPxYg

6

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