Learn Accessibility by Building a Quiz - Step 50

HTML-CSS
1

Tell us what’s happening:
I’m having trouble with the fix the challenge tells me to do (Fix this by using Flexbox to wrap the ul content.) I don’t think there’s a step before this one that informs me of how to do the process, hence, why I’m lost on this. I tried setting the unordered list to (flex-wrap: wrap) but it didn’t work, so I have no idea what to do now. (P.S. For the code below: I did try removing the CSS code that I was instructed to copy to see if my solution worked and it still wouldn’t work.)

Your code so far

  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
  text-align: center;
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul (flex-wrap:wrap) {
  align-items:center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
  display: flex;
  justify-content: space-evenly;

}

nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

main {
  padding-top: 50px;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
}

p::before {
  content: "Question #";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Challenge: Learn Accessibility by Building a Quiz - Step 50

Link to the challenge:

2

Hi @neodoescode,
In order for us to help, please attach ALL of your code.

Thanks,
Hal_Jordan

3

Added all of the code now, thank you.

4

Try this:

Reset the code
Click check
Read the hint

Edit: the empty line in the editor is also a hint. It tells you that the new code should go there…

5

Hi @neodoescode,
So your code declaration is correct. However, it is the location.
Not sure where your parentheses came from, but example of CSS code block in link: => CSS Basics: The Syntax That Matters & The Syntax That Doesn't | CSS-Tricks - CSS-Tricks

Hope this helps.

Thanks,
Hal_Jordan

6

This fixed it! Put it in the right location now. Thank you.

7

@neodoescode hearts always welcome.
:wink:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.