Responsive Landing Page - Flex Box

Community feedback

• 

  Amon•2,560

  @A-amonPosted almost 3 years ago

  Hello! Amazing work there~ 😀

  I've got a few suggestions:

  • To align the logo and navbar links, you can add this code to your .nav-bar

  display:flex;
  align-items:center;
  justify-content:space-between;
  

  • I don't think you have set the hover state for your social media links/icons. Anyhow, I would usually use the SVG code itself instead of img for these since I can more freely change the icons' color. You can refer to this 😁
  • Looks like your .display-img images couldn't fit inside a row on laptop size. You can fix this by setting flex:1; to your picture tags within instead of setting width:25vw;. Then, on mobile, simply use a media query to change that to flex:100vw;.
  • For your .show navbar, you can use media query to override/reset .show styling on desktop sizes. 🖊
  • You should use <button> for the hamburger button since it's a well, button. 😂 I will let screen reader users to know it's one. Check this out 😉.
  • The 'Learn More' text should be links 🔗 instead so they should be using <a> tags.
  • The social media links should have a text telling screen reader users what each link is for. You can use the aria-label attribute on the <a> tags and set it to 'Facebook' or other values, then leave the alt attribute empty (This is what I would do 😀). You can check this out.

  Marked as helpful

  0

  ---

  

  Joe•60

  @Joe-LindiePosted almost 3 years ago

  Hello @A-amon,

  Thanks for your help with aligning the navbar/logo - It seemed so obvious once you said it. I must have been staring at the code for way too long.

  Thanks for all your other tips, too!

  0

  

  Amon•2,560

  @A-amonPosted almost 3 years ago

  @Joe-Lindie It's always good to take a break in between, just to clear our mental "cache" 😉

  0
• 

  Ediongsenyene Joseph I.•1,675

  @IEdiongPosted almost 3 years ago

  5. Set a media query to change the layout of the .nav-bar.

  Some other things you should look into:

  • Look into the accessibility and HTML issues raised here.

  I hope this was helpful, Shalom!

  Marked as helpful

  0
• 

  Ediongsenyene Joseph I.•1,675

  @IEdiongPosted almost 3 years ago

  Hi Joe, congratulations on finishing your second challenge here. A quick suggestion, try completing the newbies and some simple junior challenges as this would prepare you to handle the more difficult challenges.

  Possible solutions:

  1. You can add the following CSS rules

  .nav-bar  {
     display: flex;
     align-items: center;
     justify-content: space-between;
  }
  

  from here you can add more rules to make it look as you want. 2. I believe you selected the contact with the nth-child correctly but you set the rules wrong, try this instead

  li:nth-child(4) {
      background-color: #fff;
  }
  
  li:nth-child(4) a {
      color: var(--Very-dark-blue);
  }
  

  this is because the rules set in the .nav-item a selector is more specific than the one you had set. For more info look up CSS Specificity.

  Marked as helpful

  0

  ---

  

  Joe•60

  @Joe-LindiePosted almost 3 years ago

  Hello @IEdiong,

  Thanks for your help. Especially targeting the nth-child. It was driving me nuts!

  @IEdiong I completed a newbie challenge and thought I'd push myself with a junior. It's is quite a jump. haha

  Cheers!

  1
• 

  Martin Eliáš•890

  @martinelias1312Posted almost 3 years ago

  Hello Joe,

  Some suggestions from me:

  gaps fixing:

  .Random-img { display: block; }

  .box{ display: block;}

  hover fix (works for me):

  .socials a:hover { }

  At your Egg image you used id="egg-img" for <img> and <source> element too. There should be just one unique id.

  Anyways good job on your second challenge! :)

  Marked as helpful

  0

  ---

  

  Joe•60

  @Joe-LindiePosted almost 3 years ago

  Hello @smradupan ,

  Thanks for the tip. That helped fix the issue of the gap.

  I removed the id="egg-img" too as I was not using it.

  0