Body size / What code is required?

[ogulcan1787]

Hi everyone.
I added border radius to this code and made the bottom part as I wanted.
But I can’t fix the top part.

What codes should I add to make the upper part look just like the lower part?

like : top-height-size: -30%; ? but this not working

body:before {
  display: inline-block;
  border-radius: 15px;
  width: 1125px;
  min-height: 100%;
  height: inherit;
  background-color: #fff;
  content: " ";
  position: fixed;
  left: 50%;
  right: 0;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

[bryce (Bryce Huhtala)]

I’m, sorry but it doesn’t seem clear what you need to do. Could you please add more details about:

1. What specific part of the page you are trying to change.
2. What change you are trying to make.

[ogulcan1787]

The top part, I want to do it like this

PvP Farm

I want to add border radius like bottom(under) part
All I want is to have some space at the top between it and the header.

My English is bad, sorry. Thank you for help

[bryce (Bryce Huhtala)]

It’s ok, your English is good, but code can be tricky to talk about! Thank you for adding more details. I think the problem makes sense.

Sometimes you can you use margin-top to add more space above.

But it does not work when you scroll!

This is because there is position: fixed in the body:before part, so it will alway stay in the same spot on the screen. Let’s change it to position: absolute instead. ‘Absolute’ lets us tell it how far from the sides we want the edges. We need to tell it to use body for the sides, so we need to add this code:

body {
  position: relative;
}

(If you want to learn more about position, fixed, and absolute here here is a post with examples)

Ok, let’s delete min-height: 100% from body:before, because we want it to be shorter than 100%. Now we can control where the top and bottom are! Let’s add top: 70px and bottom: 30px. (Top needs to be big enough to go past the header from the top of the screen).

Does that seem how you wanted? Let me know if it makes sense.

[ogulcan1787]

You are amazing!
Thank you for teaching me instead of giving me ready-made codes.
@bryce