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

Ryan Chaplain
Ryan Chaplain
1,504 Points
Posted by Ryan Chaplain
Ryan Chaplain
1,504 Points

Responsive Image With Text Overlay

Hi! First off, here's my CodePen snippet, with all the relevant CSS to the containers supplied: http://codepen.io/anon/pen/EVXejM?editors=110

Now my problem...I'm trying to make this image responsive with the text, "Grand Canyon" horizontally centered, and just below vertically centered on the image, as displayed in the CodePen if you set the browser to 320x480. That's what I want, however as I expand the browser, the text keeps falling further left of center as the image expanded as intended, to fill 90% of the screen width. I've tried so many things, and this is the best I've gotten.

I've tried different combinations of absolute and relative positioning as well as floats on all the elements except the ".main-content" and nothing is working correctly.

I've also tried replacing the "img" with a "div" and setting the image as the background, but I couldn't get the image displayed without setting a fixed height, which wasn't responsive.

I also tried setting a background image to the "p" element directly, but, again, I have to set a fixed height to get it bigger than the text itself. I've tried placing the "p" element outside of the "a" element, which isn't what I want, but that didn't work either.

I've even tried emulating another site's exact code with my setup, and it still didn't work. I'm missing something small. I can smell it!

I'm sure it will be a simple fix, but I've exhausted my trial and error patience over the last couple days!

1 Answer

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Hi Ryan, I looked over your code and maybe i have a solution that might work. You have to change the css rules of your anchor tag into the following:

#photos a {  
  display: inline-block;
}

Change the css of the p tag into:

#photos p {  
  font-family: 'Dancing Script', cursive;
  color: #ffffff;
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
}

The last rules position the p tag in the middle. You can alter the values of top for the vertical position.