Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page with Buttons

George 40

@Georgecip1

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 240

@nicodes-dev

Posted

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 GitHub
Discord logo

Join 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