Hello! The code I added to the starting point is below, along with some comments about the things I have questions about. A couple of the things are really weird! I’ve been using Opera, and decided to download and install Firefox to see if it worked any differently there. The answer is no.
@media screen and (min-width: 600px) {
header {
display: flex;
justify-content: space-between;
}
nav ul {
display: grid;
grid-template-columns: 4.75em 4.75em 4.75em;
margin-top: 0.5em;
padding: 1em;
gap: 0.5em;
}
nav li {
border: none; /* This should get rid of the :focus state border,
but doesn't */
}
nav a {
border-top: none;
}
nav a:link { /* This rule must be present, and */
background-color: #333; /* must have a background-color */
} /* attribute for the :visited */
/* state background-color to work */
nav a:visited { /* I added some real links to the HTML to test this */
background-color: rebeccapurple;
color: gold;
}
nav a:focus {
background-color: red;
border: none; /* Another attempt to get rid of the border */
}
nav a:hover {
background-color: blue;
}
nav a:active {
background-color: green;
}
main {
display: flex;
justify-content: space-between;
}
.sidebar {
margin-left: 0.5em;
margin-top: 0.5em;
width: 90%; /* Isn't this supposed to be a percentage of the */
} /* container's width; namely, main? */
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5em;
}
}
And here is a link to the assessment page:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills
The first thing is that I had had trouble getting the :visited state background-color to work. The color attribute worked, but the background-color was being ignored. Even stranger, the dev tools indicated that the background-color defined in the :visited rule was the one in effect. At first I didn’t have a :link rule, because it didn’t seem necessary. Adding one with a background-color fixed the issue. But then, removing the background-color from the :link rule and putting something else there reintroduced the problem. What on earth is going on with that?
The second thing is that the link display has a border and a thin sliver of light space around it whenever it receives the focus with the tab key or shift-tab. It also has a small border-radius. It’s an interesting effect, but I’ve been trying to get rid of it without success. I made a couple of attempts with border: none in my code above. I can’t find anything in the CSS that defines that border. Where is it coming from?
Third, I don’t understand the width percentage I had to put in the sidebar. It seems to me that it should be a percentage of the container’s width; that is, of main. Therefore, a value of 20% or thereabouts should do the trick. But that narrowed the sidebar instead of widening it. I experimented until a value of 90% got it looking the way I wanted. The question is, if the percentage is not in relation to the width of the container, then it’s 90% of what?
This has been an interesting course so far. And I’m looking forward to getting to the Javascript modules, which is why I began it to start with.