Project help needed

I am doing the documentation page . And unfortunately my #left-div element is not positioned at the top when the size of the screen is 800px. What have I done wrong here. Please help.


the link provided does not work

1 Like

Hey @SamuelRose, please fix the link of your project, so we can see the code and help you.

Sorry I have fixed the link now.

1 Like

Hey @SamuelRose,

I looked into your code.

On the media query part, change the position to absolute or fixed (if you want it to stack on top when scroll) for the #left-up selector, like this:

@media screen and (max-width: 800px){
    position: absolute; //or fixed
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;

So the element positioning is relative to his parent element, that is the main element, that you gave him the position: relative.

Then, after you change the #left-up slector to position: absolute or fixed, make your adjustments for the element on the CSS.

Good luck :wink:

@SamuelRose, the position property is good for other things than for layout the entire webpage.
Personally I dont like to use the position property for layout the entire page.
Using floats instead, is a better and comfortable way to layout a webpage.

Try this on your css:

// remove the postion property and  instead give it float: left and remove the offset propertys (top and left)
  // position: fixed;
  // top: 0;
  // left: 0;
  float: left;
  width: 30%;
  height: 100%;
  border-right: 4px solid #c9c9c9;

// here remove the  margin-top: 20%; 
  // margin-top: 20%;
  overflow-y: scroll;
  height: 100%;

Then make your adjustments on the CSS.

thnx @ItamarRosenblum it helped me a lot

1 Like

Happy to help @SamuelRose :slight_smile: best of luck mate