Help needed - Media queries on a project

HTML-CSS
1

Hello,

I have some problems finding my error and I’d like to improve responsiveness of my projects. So, I’d like the navbar to become the “header” of the page when its width is too small. I tried to use flex but I think I’m doing it wrong as you can see : https://codepen.io/TekLeak/pen/MWKGmKR
Any tips ?

Thanks!

2

See the post below mine for the correct answer:

I love that you want to make it more responsive and continuing to work on it even though it passes all of the tests. Your problem is that “header” is an html element that just includes what typically goes at the top of your website. It should only be used once. It is part of the semantic html. You’ve used it in many lines. Remember that there is an html element to use that means the “heading” of each section.

3

@TekLeak Set the navbar to be full width and give it overflow properties to hide the X overflow and auto the Y overflow. Then you need to push down main and fix the margin. Then you will need to fix the sections so the links land correctly (more info).

Example code 
@media (max-width: 640px) {
  body {
    display: flex;
    flex-direction: column;
  }

  main {
    /* remove the left/right margin and push it down below the header/nav */
    margin: 150px 0 0 0;
    padding: 0 20px;
  }
  /* make the links land correctly */
  .main-section {
    padding-top: 180px;
    margin-top: -130px;
  }

  #navbar {
    height: 150px;
    font-size: 0.8em;
	/* full width and overflow */
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #main header {
    font-size: 1em;
  }

  .main-section {
    font-size: 0.8em;
  }
}

@terrifricker The header elements are a challenge requirement and can be used multiple times on a page. Here it is used per section.

1 Like
4

Thank you so much for correcting me right away! I’ll try to be more careful with my “help”.

1 Like
5

It’s all good. One of the benefits of helping is that you learn as well.

1 Like
6

Thanks both of you for your help ! It seems like I still have a lot to learn and I’m glad I found a community to help :slightly_smiling_face: