into-section-with-dropdown-navigation-main

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Alieu, great job working on this, as this challenge is not an easy Junior one!

  About the dropdown, all you need to do is to write a :hover rule on the title link that affects the dropdown nav. Since the title and dropdown nav are siblings (siblings meaning they're at the same level, not a parent/child) and they happen to be just next to one another, we can use the adjacent sibling combinator, +.

  .link-1:hover + .dropdown-list-1 {
    display: block;
  }
  

  This just means, we're telling the browser that when there is hovering on the link, change the dropdown nav to a block element. The last item in a selector is always the one that is affected by the rule. I got that working in the browser inspector for me, so hopefully that works for you as well. One other thing you'd want to look into is, at a smaller screen size (but not mobile view), the nav items are very tightly put togehter; I suggest giving it some margin to keep them apart. Good luck with the JS in the future!

  Marked as helpful

  1

  ---

  

  Alieu•190

  @alieuk61Posted about 2 years ago

  @elaineleung thanks you so much elaine, you never fail to make me happy 😄

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @alieuk61 Glad I could help! 😊

  1
• 

  Alieu•190

  @alieuk61Posted about 2 years ago

  also can someone please let me know if the actual website looks different/the same to solution displayed in the design comparison, because to me the solution that i see looks worse than what i see when i click on the website.

  0

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @alieuk61 Ah, I just read this... yes, the screenshot matches what I'm seeing in my browser. I notice in your stylesheet that there aren't any reset/normalize rules. I think you can consider adding them (I use reset rules in every project), as that would help to ensure that your styles can be consistent across browsers since each browser has its own default styles. At the very least, you should try to have the star selector box-sizing: border-box and margin:0 rule.

  I also have a few other suggestions as I'm looking at your code right now more closely:

  1. The hero image is a bit distorted, so I'd suggest adding an object-fit: contain to fix that.

  2. You got a number of containers as flexbox here, and I think you can use that to your advantage by using flex in the children containers instead of a fixed percentage width. For example, in the header, it doesn't stretch all the way to the right end on larger screen size. To make it stretch, I would remove the width you have on the final-buttons and add flex: 1 instead.

  3. Right now the image seems to be overflowing to the side when I'm resizing the browser, and I think that has to do with the large margin on the image as well as the fixed width on the h1 title. I'd probably use a max-width on the title, or, as I mentioned in the point above, I might try using flex for that text container.

  Good luck working on this!

  Marked as helpful

  1

  

  Alieu•190

  @alieuk61Posted about 2 years ago

  @elaineleung Thank you very much!

  0