Furk• 600
@doganfurkan
Posted
I suggest you have a look at flex boxes. You shouldn't be using that much absolute positioning. My page structure would be like this:
<body>
<main id="card">
<section id="result">{Here is where the "Your Result" section going to be}</section>
<section id="summary">{Here is where "Summary" section going to be}</section>
</main>
</body>
And then, I would use flex boxes to position them:
// This container styling positions my card at the center
body{
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
// This card styling makes my Result and Summary section side to side without using absolute positioning
#card{
display: flex;
background:#fff;
box-shadow:3rem 3rem 5rem rgba(0,0,0,0.25);
border-radius: 1rem;
}
This is what I'm suggesting to you to kick off your flexbox knowledge. If you want to learn more about flexbox, you can click here But if you want to see how my structure would work in real life, I also completed this challenge, and you can have a look at it by clicking here
You are off to a good start, I'm sure you can develop your knowledge by doing projects like this. If you have any further questions, I will be happy to help.
At last, I would appreciate it if you find and mark my comment as useful.
Marked as helpful
1
