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

HTML, CSS, mobile-first and animations with transition and keyframes

pimoux 370

@pimoux

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I adapt the margin and padding when shrinking the screen ? On desktop format the page looks very good but when shrinking the elements are too far apart.

Community feedback

@beaventura

Posted

So, what are you going to do to have it responsive depending on the device being used when accessing the site? For me, I will set a breakpoint if the device dimension is 640px (mobile), 1024px (laptop), or 1400px (desktop). That's the basis for you to change its class style. I hope it helps 🤗

0

pimoux 370

@pimoux

Posted

Yes your solution works too but I was wondering if there is a way to change the value of the margin and padding when resizing the screen and avoid using media queries. Normally when we set percentage values, the value depends on the size of the elements. I think it depends on the context and if the latter is too complicated, using media queries is a better solution.

0

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