Meet Landing Page Solution

Community feedback

• 

  P

  Mihailo Sparic•260

  @MihailoSparic01Posted 8 days ago

  Great work, Ahmed!

  I have a few suggestions:

  In your media queries, try using em units instead of pixels (not rems, not px, but ems). It’s a more flexible approach.

  For images, use max-width: 100%; instead of width: 100%;. This helps maintain their aspect ratio while ensuring they don’t exceed the container width.

  When starting a component in one layout style, like using flex for an image gallery, it’s best to finish it that way as well. Mixing flex on desktop and grid in media queries isn’t considered good practice.

  Start considering adding media queries for larger screens. I can’t see the background image as I should at the beginning. Here's an example of how it looks on ultrawide monitor: https://imgur.com/a/8EK4H2X

  The following code will fix that:

  @media screen and (min-width: 120em) { .yourClass { background-repeat: no-repeat, no-repeat; background-position-x: 20%, 80%; background-position-y: 50%, 50%; } } It will look something like this:

  https://imgur.com/a/tgvErJZ

  The footer is responsive on tablets, but not on mobile. There seems to be a small bug somewhere—check that out. It shouldn’t be too difficult for you to find and fix.

  Everything else looks excellent overall. Keep up the great work! 😎

  Marked as helpful

  0

  ---

  

  P

  Shawky Ahmed•260

  @QS3HPosted 8 days ago

  @MihailoSparic01 Thanks a lot for the great suggestions. :) I will look that up and improve my code further.

  1