Span element - portfolio page

Tell us what’s happening:
Good morning everyone, I am currently building my portfolio page and I am creating a responsive menu using HTML and CSS only. I am trying to add a label and span element to expand the clickable area of my checkbox. Unfortunately, my span element isn’t working. I cannot enter text to show the extended area. Any help would be appreciated. Thanks.

Anthony

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0.

Link to the challenge:

I’m afraid I don’t understand what you are trying to do. You only want to resize your checkbox? Have you tried this?

Are you trying to expand the checkbox below the logo?
You could style it directly by using internal css in the html doc like so:

<input type="checkbox" style="height: 20px; width: 20px;"/>

You could also use external css but due to cross platform compatibility issues its a very very long process so the inline way is faster

Remember a span is an inline element you likely want it to be inline-block or block.

Why are you removing the label using display: none. You should set the input to visibility: hidden.

.nav-toggle {
  visibility: hidden
}

.nav-toggle-label {
  font-size: 1.625em;
  position: absolute;
  top: 0;
  right: 0;
}

.nav-toggle-label > span {
  display: inline-block;
  padding: 10px;
}

I was at work sorry for the delay. I actually figured it out. Thank you guys very much!