Landing Page Project - Page cuts off at the bottom

1

DB095C32-939F-40E3-A168-2C0D1C38C71B
DB095C32-939F-40E3-A168-2C0D1C38C71B1243×714 166 KB

Hello,

I have passed all the user story tests for this project but my web page doesn’t look as neat as I would like it to. The page cuts off at the bottom and I cannot scroll further down to see the rest of the images and video as well as the footer. Also the three nav-links in the top right corner are not fully displaying.
I’m not sure where I have gone wrong. Please help.

Here’s the CSS code:

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


@media only screen and (min-width: 768px){

#header-img{
    position:fixed;
    left:474px;
    bottom:445px;
}

body{
    background-color: khaki;
    max-width: fit-content;
    max-height: fit-content;
  

}


h1{
    position:fixed;
    bottom:665px;
    left:515px;
   

}

h2{
    position:fixed;
    top:262px;
    left:465px;
}


#nav-bar{
    position:fixed;
    bottom:180px;
    right:100px;
}

.nav-link{
    position:fixed;
    right:210px;
    bottom:650px;
    
}



.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    padding:10px;
    bottom:90px;
    left:25px;
    
}

ul{
    list-style-type: none;
    margin:0;
    padding:0;
    width:100%;
    
}


li{
    display:inline;
    
   }


li a{
    text-align: center;
    color:black;
    text-decoration: none;
    font-weight: bold;
    padding: 14px 16px;
    background-color:peru;
}

li a:hover{
    background-color: white;

}


#email{
    height:24px;
    width:24%;
    text-align: center;
    position:fixed;
    left:469px;
    top:330px;
}

#submit{
    background-color: peru;
    color:white!important;
    text-align:center;
    height:24px;
    width:24%;
    position: fixed;
    top:380px;
    left:471px;
}

#video{
    position:fixed;
    top:500px;
    left:340px;
}

#MocToe{
    position:fixed;
    left:1px;
    top:615px;
}

#Male{
    position:fixed;
    top:539px;
    left:16px;
}

#Lillian{
    position:fixed;
    left:455px;
    top:600px;
}

#Female{
    position:fixed;
    bottom:10px;
    left:479px;
}

#Quality{
    position:fixed;
    left:900px;
    bottom:2px;


}

#Craftmanship{
    position:fixed;
    bottom:16px;
    left:907px;
}


#form{
    text-align: center;
    position:fixed;
}


footer{
    text-align: center;
    position:fixed;
    top:900px;
}

}
2

Hello Efo,

You’ve got a lot of fixed positioning. Why?
Do you have the page online so we can see the page in action?
Post the HTML as well. Something could be wrong in the HTML code that you have not posted; and it’s hard to know what the ID selectors are affecting.

3

I have also noticed that, you have used to many positioning to fixed. Try to find the positioning in CSS and you will get the clear idea. As well, can you please post your link as well, so that it is easy to suggest you what improvement is better.
Good luck

4

@leebut

Hello,
Thanks for the response.
I’m fairly new to web development and programming in general. I used fixed positioning because relative position was not achieving what I wanted; the images and text were changing positions on the page when scrolling, I wanted them to be static.

I have created a repository on GitHub; here’s the link to the HTML:

I have not yet published the website online.

5

@gangalalchapain

Hello,
Thanks for the response. Please see my earlier response to @leebut.

6

Hello Efo,
Your footer is outside the </body> and </html> tags.
I’m not sure why you’ve put your iframe inside <p></p> tags.

I suspect your fixed positioning is messing up the layout as well.

You have empty sections from line 33 - 34. If they are not going to be used, comment them out or remove them. Also, keep IDs simple without punctuation marks other than - and _. For example, id="men-footware"; same with the internal links to the sections.

You have the same fixed positioning applied to all of them, so they are all being displayed from the same pixel origin.

EDIT: Instead of trying to fix many things, it might be easier to start again using flexbox, which will give you better control over the elements, so that you are not fixed positioning everything. Also, it will be more responsive, you know, look good on different screen sizes.

7

Hello Lee,

I really appreciate the feedback. I’ve moved the footer and I will use flexbox as suggested and report back on how I get on.
Cheers.

8

10
102542×906 144 KB

@leebut, I learned more about flexbox and used it to solve my problems. Thanks for your guidance.

9

31
312538×1378 600 KB

The page now looks as I wanted it to.