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 Travis Joyner
Travis Joyner
14,553 Points

Absolute-positioned text & responsive design

I have an image whose width equals 100% of its parent div, and <ul> and <h2> elements positioned absolute on top of the image. Simple enough, looks great.... until the browser is resized, of course.

Is this simply a bad design idea, or is there an easy way to make all the absolute-positioned elements scale with the image on resize? I'm assuming my "top" and "left" CSS tags will need to be percentage based, but I'm not sure what percentages to use, or how to accurately scale the font-size with it.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It's fine to do, it just does create a bit of extra work. You'll likely want to use media queries to create large adjustments as the site scales. The positioning values and font size can still be in percentages (maybe em's for font size), but that will still break down at some size. That's when you'd want to have a media query to adjust the size.

As to how, there is no great way to figure it out. It's part guessing, part trial and error.

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Travis:

I recommend using figure or another block element to contain both the image and other things you want to be positioned a certain way on top of the image. Such an element would then have the position: relative declaration.

Absolute positioning with traditional relative unit sizing can work, but depending on what you're trying to do (and what browsers you need to support), Flexbox and viewport sizing units can simplify what you're trying to accomplish as well.