Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Alita Edmonds
Alita Edmonds
6,068 Points

My image text is appearing on the wrong image!

I have three images with text over each one. However in the desktop view, the third image text appears on the second image. On the mobile screen, it works just fine. Is there a way to fix this? Thanks

<div class="grid">
  <div class="cell"> <!-- First Image Div -->
    <a href="cooking/cooking.html" class="img-a">
      <p class="img-p">My Favorite Spices</p>
      <img src="img/spices.jpg" class="img">
    </a>
  </div> <!-- First Image Div -->

  <div class="cell"> <!-- Second Image Div --> 
    <a href="programming/programming.html">
      <p class="img-p">How I Code</p>
      <img src="img/code.jpg" class="img">
    </a>
  </div> <!-- Second Image Div --> 

  <div class="cell">  <!-- Third Image Div -->
    <a href="adventures/adventures.html">
      <p class="img-p">Pretty Plants</p>
      <img src="img/leaf.jpg" class="img">
    </a>
  </div> <!-- Third Image Div -->

</div> <!-- Grid Div -->
Tim Knight
Tim Knight
28,888 Points

Hi Alita!

Would you mind sharing your CSS in addition to the HTML that you've included?

2 Answers

Tim Knight
Tim Knight
28,888 Points

Okay Alita,

I see what's happening here. Your first box as the class="img-a" on it, but you don't include those on the other two. Because of that the absolute positioned text isn't being positioned relatively to each box. So all you have to do is add that class to each of your boxes and you're all set.

<div class="grid">
  <div class="cell"> <!-- First Image Div -->
    <a href="cooking/cooking.html" class="img-a">
      <p class="img-p">My Favorite Spices</p>
      <img src="img/spices.jpg" class="img">
    </a>
  </div> <!-- First Image Div -->

  <div class="cell"> <!-- Second Image Div --> 
    <a href="programming/programming.html" class="img-a">
      <p class="img-p">How I Code</p>
      <img src="img/code.jpg" class="img">
    </a>
  </div> <!-- Second Image Div --> 

  <div class="cell">  <!-- Third Image Div -->
    <a href="adventures/adventures.html" class="img-a">
      <p class="img-p">Pretty Plants</p>
      <img src="img/leaf.jpg" class="img">
    </a>
  </div> <!-- Third Image Div -->
</div> <!-- Grid Div -->
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you! It works!

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points 
.img {
    max-width: 100%;
}

.cell img {
    display: block;
    padding-bottom: 5px;
}

.img-a {
    display: block;
    position: relative;
}

.img-p {
    position: absolute;
  color: white;
  background-color: white;
  color: tan;
  padding: 10px;
  font-family: 'Quicksand', sans-serif;
  left: 50%;
  transform: translateX(-50%);
}

section div a p {
    text-align: center;
}
Tim Knight
Tim Knight
28,888 Points

What about your grid and cell classes? Are you using any other CSS that would control positioning on your page?

Tim Knight
Tim Knight
28,888 Points

Alternatively if you have this setup in a Workspace and can share that address I'm happy to take a look to see why this is positioning things incorrectly.

Alita Edmonds
Alita Edmonds
6,068 Points

No, there is no grid and cell classes. I am working on Sublime Text but I will copy and past my code into a workspace.

Alita Edmonds
Alita Edmonds
6,068 Points

Oh! I just forgot. I have the mobile classes. Will this help?

@media screen and (min-width: 600px) { .grid { display: flex; flex-wrap: wrap; flex-direction: row; } .cell { width: 50%; } }

@media screen and (min-width: 1000px) { .cell { width: calc(100% / 3); } }