Hey @AdnaanH, good job with this challenge !
My main advice for this work, would be to avoid to use fixed height and width, like that :
.aside {
width: 13em;
height: 25em;
}
A better option could be to put your elements inside a components, like with bootstrap's container. I personally designed a small simple .wrapper, which avoid me to use Bootstrap, or whatever. You can try to wrap your .aside & .main-bar is this component :
.wrapper {
width: 100%;
padding-left: 20px;
padding-right: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
display: inherit;
justify-content: inherit;
align-items: inherit;
flex-direction: inherit;
flex-wrap: inherit;
gap: inherit;
z-index: inherit;
}
With this solution, your elements will be automatically set to 100% width & height ! I'm using it since more than a year from now, and i never deceived me ! The purpose in to think "flex" !
Second thing : font is not loading on my computer, think about inherit fonts like this : font-family: 'Arial', 'Helvetica', sans-serif, in case fonts can't be covered in the current page for any reason.
Finally, not sure about using section inside a main component, but I may be wrong 🤔
Keep coding, good luck for next challenges !
Marked as helpful
@AdnaanH
Posted
@FlorianJourde Thank you I will take into consideration the above adjustments and try working around that in my project. I have been having some bit of difficulty with width and height but I am getting it done as I progress and your feedback has been helpful too.
