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 component using flexbox

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


Hey Folks, I've just finished my third project, and I'd really appreciate any feedback to help me improve my code. I didn't use bootstrap or other tools like that. I tried to use the concept of Utility First in CSS, but I got confused and had problems with some classes, especially on the @media screen part... So I restarted the code to the normal concept. How can I improve or make my code more advanced... As a newbie, I am open to any other suggestions. Thanks in advance!!!

Community feedback

@ralvarezrenzo

Posted

Hi monica good job ;). You started doing the styles for desktops, the vh of the main container is smaller than the content you would give it a vh to contain everything you have in 100vh you would increase to 120vh and in the @600px you would put 100vh since it is smaller and also your footer link - attribution will be leaving you a blank space outside the container to that you would give a padding of 0 and it would be fixed, I would recommend using box-sizing in the reset, also study and use the units of measurement rem em px, will help you to the layout faster that concept. Greetings good day. ;)

Marked as helpful

1

@mjbaga

Posted

Hi, Monica. Card looks awesome. Nice job.

Tip for media queries, maybe you can look into mobile-first styling. So it's concept where you set your css rules for mobile first, then when there's rules that change as you go higher like tablet and desktop, you do your media queries then. Really helped me a lot in doing responsive designs.

Marked as helpful

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