set background-size 20px square.

Question

in this one it told me simply to write background-size: 20px square;

but when i'm doing it it's telling me: Did you set the background size to 20px square?

i tried multiple things like making a new .contact-info li instead of writing in the original one but it still fails to do it??

css/main.css

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

ul.contact-info {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;

}
a:link, li.contact-info {
  min-height: 20px;
  background-repeat: no-repeat;
  display: block; 
  background-size: 20px;
  padding: 0 0 0 30;
}

Answer 1 · 2016-02-10T20:25:44Z

February 10, 2016 8:25pm

Hey Mike,

Michael A's answer is correct. I went through and did the challenge myself so I thought I'd mention a couple of things I noticed about your code.

My css looked like this:

li.contact-info a {
  min-height: 20px;
  background-repeat: no-repeat;
  display: block; 
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

We're selecting all the anchors (a) within list (li) elements with the class contact-info (.contact-info). I think that's how the challenge phrased it. When you write it out in English the anchor part comes first, but in the css rule it comes last. The anchors we want to select are inside the li.contact-info: li.contact-info a. The space indicates that we are going to the next level, if you were to think of it like an outline, maybe.

The selector you wrote:

a:link, li.contact-info {

Because you used a comma, you're telling the browser to apply this rule to two things: all of the anchor elements on the page and all the list elements with the class contact-info. Actually, because you're using a pseudo class ( :link ) you're only applying it to some of the links (hovered and visited links will fall back onto another rule). It's possible the challenge was throwing you an error because of the selector.

Lastly, I tried using a shorthand for background-size:

  background-size: 20px;

Thinking that should apply to width and height, right? It didn't work, of course. For stuff like margins and padding you can write one value and it will apply to all four sides, you only need two values when you want something different for top/bottom and right/left. But that's not the way it works for background-size. You have to give both values:

  background-size: 20px 20px;

Maybe more info than you wanted but hopefully it's helpful.

Answer 2 · 2016-02-10T14:41:06Z

February 10, 2016 2:41pm

Hey Mike,

"... set the background size to 20 pixels square...." So your CSS should like something like this:

main.css

a:link, li.contact-info {
  min-height: 20px;
  background-repeat: no-repeat;
  display: block; 
  background-size: 20px 20px;    <--------------
  padding: 0 0 0 30;
}

Hope this helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Mike Hansen

Mike Hansen

set background-size 20px square.

2 Answers

Michael Hanna

Michael Hanna

Michael Afanasiev

Michael Afanasiev

Michael Afanasiev

Michael Afanasiev