Design comparison
SolutionDesign
Solution retrospective
I've had problems with making the landing page work from a wider view than from a "phone" perspective.
Community feedback
- @nicodes-devPosted about 2 years ago
Hi George! Your mistake is using percentage in the max-width of your content class. I suggest that you use a fixed unit in your max-width.
@media (min-width: 440px) { //other styles .content { max-width: 500px; //you can also use rem, em } }
You can also use clamp in your width, then you won't need to add a media query for it.
// clamp(MIN, VAL, MAX) width: clamp(300px, 90%, 500px);
You can learn more about clamp in the official docs. clamp
You also need to add a <main> tag in your solution. You can just replace the div tag of your content class.
<main class="content"> .... </main>
Feel free to ask if you have any question.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord