First of all, I would like suggestions on how to make my code cleaner if any. Second of all 1 would like suggestions to improve the responsiveness of my page. Most of all I would really like to know if I made correct use of media queries in my solution. If not, please give suggestions on what I can do to improve.
No major problems but please let me know if the different layouts are visually appealing.
I would like suggestions on writing cleaner code. But I welcome all suggestions to make my solution better.
I welcome any suggestions to improve my code especially concerning responsiveness and proper layout.
I would like to know how to fix something at the bottom of a page. My .attribution element was fixed at the bottom of the screen using fixed position but for a vey small screen it could overlap with the other elements. I would like to know how to fix it to the bottom of the page like a page number or a footnote.
I'm most proud of how clean and close to the design I was able to make the layout. Next time, I’d focus more on responsiveness from the beginning.
What specific areas of your project would you like help with?Improving responsive layout and best practices for structuring CSS more efficiently.
Your solution is very good. I see no problems with the code. Although the color is different from the design.
Your code looks good. But you should change the color of your button when its set to hover.
button:hover {
background-color: hsl(75, 94%, 57%);
}
You could also change the color of the attribution, It's not easy to see it against the background-color.
.attribution {
color: hsl(0, 0%, 100%);
}
You set align-items and justify-content property in the body when you did not set display to flex. It won't center properly that way, which is why you then needed to add padding: 40px 20px; and margin: 0 auto; to center it.
Set display to flex, then remove the padding property. Set margin to 0.
body{
margin: 0;
background-color: rgb(244, 208, 78);
max-width: 1440px;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
The same goes for the .container rule. Set display to flex, remove the margin and give it a uniform padding all around. You do not need to set align-items.
.container{
padding: 20px;
justify-content: center;
background-color: white;
height: 550px;
width: 400px;
border-radius: 16px;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 1);
border-color: black;
border-style: solid;
border-width: 1px;
}
It's very good but it's different from the given design. When viewed on a different screen the page is still accessible, but the horizontal margins are reduced making it much less attractive. The code is very well written, it's structured and readable.
