Manage Landing page with mobile menu

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 1 year ago

  Hi @MelakuAlehegn, congrats on completing your project! The toggle code works well. You can use a library such as Slick or Swiper.js to create the slider for the cards. You can even write your own code using vanilla js.

  A few other things I noticed:

  1. The page looks squished at 769px. The nav and the footer look particularly off at this breakpoint. I recommend increasing it to at least 1090px.
  2. The nav-links needs an a tag nested inside the lis
  3. The hamburger toggle should be a button
  4. Section tags could be used for major parts of the page instead of divs
  5. Use a more descriptive value for the alt tags. On the nav logo for example, I would name it 'Manage logo'
  6. On mobile, the nav links container needs centering. So does the the footer logos.
  7. Add transitions to your hover states

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Melaku Alehegn•260

  @MelakuAlehegnPosted over 1 year ago

  Heyy @emestabillo, This has to be the most useful comment I got on frontend mentor. Thanks for taking your time to review this all. I tried to address most of them. Appreciate it.

  1
• 

  George•410

  @xsova113Posted over 1 year ago

  Use "overflow-x: scroll" in css for the testimonial section should be able to get the card scrollable horizontally. also flex-direction should be row.

  Try it out and lemme know if it works.

  1

  ---

  

  Melaku Alehegn•260

  @MelakuAlehegnPosted over 1 year ago

  Heyy @xsova113 I have used this and didn't work.

  0

  

  George•410

  @xsova113Posted over 1 year ago

  hi, @MelakuAlehegn, I downloaded your repo and i got it working. Heres the code:

  .testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
  overflow-x:scroll ;     <---------- add this line in your testimonial class
  }
  

  lemme know if you can get it working.

  0

  

  Melaku Alehegn•260

  @MelakuAlehegnPosted over 1 year ago

  @xsova113, This worked thanks.

  0

  

  George•410

  @xsova113Posted over 1 year ago

  @MelakuAlehegn Theres a tiny problem though, currently when you scroll you will notice that only 3 cards showing up rather than 4.

  To fix this, just add a margin left and right sets to "auto" in the class testimonial-cards like so:

  .testimonial-cards {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  }
  

  hope it helps.

  0