@Aayush895
Posted
Brother the reason you weren't able to center your entire component using flex is because you haven't set the 'main' element to a height of 100vh. The reason why you have to set the height of the main element as 100vh is that the align-items:center property in flex center the element relative to the specified height of the parent element. This means your result-summary component will center itself vertically relative to whatever the height is for the main component. Second of all create a div inside which you put the section and the summary component together. So the code should look something like this: HTML portion:
<main>
<div id="result-summary-component">
<section>...Code for this portion...</section>
<div id="summary-component>...Code for this portion...</div>
<div/>
<main>
CSS portion:
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
The above code should center your entire result component to the center of the screen. Another suggestion would be that try to make your component responsive for different devices using the media queries in CSS. Let me know if the above snippet helps or not. Happy Coding!
Marked as helpful
