@SteveNoyes
Posted
Your code looks great, it is concise and well organized. There are a few suggestions below.
The global reset * { padding: 0; margin: 0; } is good for eliminating default browser styles, but you might want to include box-sizing: border-box; for better control over element sizing. Consider adding box-sizing: border-box; globally or for specific elements where necessary.
The .container class uses margin-left: 450px;, which is not responsive and may cause layout issues on smaller screens or different resolutions. Replace margin-left with margin: 0 auto; for better centering. You can adjust with media queries if necessary.
The .btn class could use padding values that are more dynamic, as the current values may not adjust well to content changes or translations. Use relative units (e.g., em or rem) or percentages for padding to ensure better scalability.
The .footer and .attribution have identical styling in both the main and media query sections. This repetition can be avoided to streamline the code. Consolidate the shared styles outside the media queries to avoid redundancy.
The media query is responsive, but the use of fixed widths like 375px and 290px might not work perfectly on all mobile devices. Consider using percentages or vw (viewport width) units to make the layout more adaptable to different screen sizes.
