Personal portfolio HTML/CSS question

HTML-CSS
1

in the personal portfolio project, i need help with some things im stuck on:

  1. im not sure what exact code it is i have that is fulfilling criteria 11
  2. what is my media query doing in this case exactly?
  3. how do you find out and fulfill the viewport size to fulfill criteria 10?
  4. why is my header “welcome to my portfolio” coming after the navigation bar even though i’ve put it before it in the link
  5. i set the link to github.com, why doesn’t it link there when i click it?

also im not sure why one of my technical documentation user stories isn’t fulfilled and im really stuck on how to fulfill it

2

Hello @scamguest

  1. For the Github link, you need to have the full url: https://github.com

  2. Your navigation stays at the top because you have set its position to fixed at top: 0 This forces it to stay at the top.

  3. Technical Documentation project, you are giving the navbar a width of 100% but the instructions require it to take a half of the screen:

On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen.

I hope this helps.

3

Hello @scamguest,

The error is: The height of the welcome section should be equal to the height of the viewport.

If we watch your CSS, there is an issue about your media query syntax:

@media all and (min-width: 500px)
  #welcome-section{
    text-align:center;
    margin-bottom:40em;
    height:100vh;
    width:100%;
    margin-top:30em;
    padding-top: 0px;
    margin-top: 0px;
    display: block;
  }

  #navbar{
    position: fixed;
    top:0;
    width:100%;
  }

I don’t know if your two CSS rules are supposed to be in the media query but if it is the case you should use the curly brackets:

@media all and (min-width: 500px) {
  /* Your code */
}

In this case, your media query is doing nothing because of the syntax issue I mentioned earlier. If you are wondering about your media query definition:

  • all: it means suitable for all devices
  • (min-width: 500px): here it means that if the window size is equal or greater than 500px, apply the media query.

The value you used is good (100vh), you just need to fix the media query syntax, or add a simple CSS definition out of the media query.

You applied a style to your nav and you gave it a fixed position. You also use the property top with the value 0. When you use the fixed value, the selected element goes out of the original HTML flow, that’s why you have this result.

When you use an url , you need to used its entire form: https://github.com/.

For the documentation project
Error: On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn't scroll with the page content.

They want you to have your nav on the left of your screen and always visible. Try to see how you could put your elements in column and make them stay at the left of the page, with the content at the right of it.

4

I’ve updated the project to have correct media query syntax, played around with 100vh in height and 50% in width in css but both did not work to satisfy user story 11 and 12, and I think 12 was perviously satisfied so I’m not sure if I did something that now changed it?

5

The syntax of your media query is still not correct.

Your code:

@media all (min-width: 500px) {
  /* CSS Rules */
}

As I shown in my previous post, the good syntax is:

@media all and (min-width: 500px) {
  /* Your code */
}

Try to compare with your code and see what is the differences.

In your previous code, as the syntax wasn’t good, it couldn’t work, except in removing the media query and keeping your CSS definitions or in adding the good syntax for the media query.

6

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