Melvin Aguilar ๐ง๐ปโ๐ปโข 61,220
@MelvinAguilar
Posted
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
CSS ๐จ:
- Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.
- When creating a media query, the goal is to override styles that can change between screen dimensions. There's no need to copy the same styles like the body element, only use the ones you need to change.
- For a responsive and resizable component, consider using
max-width
instead of width for the element, also remove the height:
.container {
/* height: 450px; */
/* width: 640px; */
max-width: 640px;
...
}
- The two columns should not have a fixed height, and they should have
width: 50%;
instead of a defined width. In the media query, you can then set them towidth: 100%;
, but without fixed widths.
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
HTML ๐ท๏ธ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
1
Harshbardhan Beheraโข 150
@HarshBehera
Posted
@MelvinAguilar Thank you for your advice . I will take a note of it in next project.
0