HTML, CSS

@tikeyike thank you so much. Was wondering what to do to solve the button height problem. I’d implement it right away.

@pikamart that was helpful. I still don’t understand the sr-only class.

@Olabayoji Hey, glad that it was helpful.

When you encounter people saying sr-only class, it is a class styling which is intended for people who uses screen readers. Because there are people for example, people who are blind and for them to use the website properly, they use screen readers.

A sr-only class, or you can call this any name, but typically, people address it by that name. A css stylings that makes an element hidden to a person who can see properly, but makes the element appear for people who can't see.

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

That is my styling for a sr-only element. You apply that classname to an element which you intended for people with disabilities to only see.

@pikamart oh. That makes sense. So in the column preview challenge, in what instance do I use the sr/only class? I’m guessing I could apply it to the car icons since visually impaired people won’t be able to see it.

@Olabayoji No no, you might have notice when using img element, there is the alt attribute right. Now, that alt attribute is what screen readers say to the user when they encounter that img, so you don't need to add a sr-only for them.

On your case, the best possible use case of this is when the user navigates in the main element. As you can see, main element is a landmark, this landmarks helps screen reader users to navigate properly. When a user navigates through this, a screen reader would read the very first text that it could find, making that text the like overall headline.

On this one, what we could do is that, when the user navigates in your website, navigated on your main since the person doesn't know what he/she would be informed with, we are going to supply them the text, we will use h1 element with a text for example:

 <h1 class="sr-only">
  frontendmentor car variety information
</h1>

Now even if they can't see what our website is all about, that text will give them an overview to what our website's content is all about.