@Klonnister
Posted
Hello! I hope you're doing fine. Your solution looks good, though regarding to your question, here are some recommendations that I think might help :).
Regarding to responsiveness, for this exercise you don't need to use any media queries as the component is small and it doesn't change for the desktop version. But here's a tip to make your website adapt to any screen sizes:
First I'd recommend setting all elements' box sizing to border box:
* {
box-sizing: border-box
}
A brief explanation of what this does is that any element with border box set will respect its size regardless of the padding or margin you add and a scroll bar won't appear. You can read more about it in W3Schools CSS Box Sizing
Then, I'd advise to delete the div with class "outer", and style your body tag instead to make it occupy the whole screen and center your component:
body {
max-width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(212, 45%, 89%);
}
Then <body> will always ocuppy 100% of width and 100% of the viewport height. Then, display flex will do the job of centering your component regardless of the screen size.
Here are a some links that can help you understand this better:
Now regarding to accessibility, I think you did great by adding an <h1> as it describes the title of the page and every page needs one. The only thing that I'd say you can improve is to add a main tag. The main tag basically tells the browser or screen readers what is the main content of the page.
You can change the tag <div> with class "whitediv to <main> and keep all attributes and classes on it.
<main class="whitediv" style="background-color: hsl(0, 0%, 100%);">
This is called semantic HTML. Here are some links to read more about accessibility and Semantic HTML
I know it is a lot, just take your time reading and practicing with them, you'll see it'll be easy peasy. Anyways, I hope I was helpful, happy coding!
Marked as helpful
@MeghaS4831
Posted
Thanks @Klonnister ! Your inputs helped. I have read a bit about accessibility and was actually wondering if I should use <main> as it was relatively a basic design. But, yes I will try to incorporate it going further irrespective of the site size.
@Klonnister
Posted
@MeghaS4831 You're welcome! And sounds good, happy coding;)
