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 Emily Plummer
Emily Plummer
2,712 Points

Responsive hero image with text box... HELP

I'm creating a new site and I would like for the hero image to have a responsive text box on top. I've add some css properties, but it's more static then I had hoped it would be. Plus in the mobile sizes the drop down menu is under the text box. I tried z-index, but didn't get any results I was hoping for.

html: <div class="hero-image-home"> <div class="hero-body"><h2>Hotel Name goes here</h2></div> </div>

css: .hero-body { background: rgba(255, 255, 255, 0.75); width: 30%; text-align: center; margin-left: 10%; padding: 30px; position: relative; top: 50%; transform: translateY(-50%); }

2 Answers

Michael Lorenzana
Michael Lorenzana
12,029 Points

You might want to try specifying your h2 element with the font size property in em value.. For example : h2 { font size: 1em;}.although you will have to play around with the size, but it should scale according to the viewport.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Your code snippet has no image nor any dropdown. You might need to supply more of the code to illustrate the issue. If you are doing an exercise in workspaces, make a snapshot of your workspace and post the link to it.

But one thing caught my eye, did you mean to use "position: absolute" instead of relative?