Boris• 2,870
@mkboris
Posted
Hi Jana, great job, here are some suggestions
- To get your component properly centered, on your
body
add
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
- Your .scene should have a
max-width
in rem and not width. - Your
img
should have amax-width: 100%
. Avoid setting fixed widths and heights on elements as that's going to probably cause some issues with responsiveness. Use max-width and percentages as units is a good option. - You don't really need media queries for this challenge and it can be styled the same for mobile as well as large devices. But if you want to, media queries should be defined in rem not px.
- Font sizes should be in rem not px, this article explains it better Why font-size must NEVER be in pixels.
- You can learn more about building responsive designs here responsive design.
- Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset. This will help reset a list of default browser styles.
2