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 CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

How can we make the caption responsive (in relation to the image size)?

I noticed that when resizing the window browser, there are certain points when the caption covers more than half of the image. How can I fix this? Should i just define new styles for the caption in my media queries (give it a smaller height or changing the font size/ line height of the text)?

2 Answers

Joshua Kelly
Joshua Kelly
18,830 Points

you can use a media query to change the font size dynamically. You could potentially try and figure it out with JS or jQuery but media query is the less verbose and would assist you more i think.

http://www.w3schools.com/css/css_display_visibility.asp

Pedro Diaz
Pedro Diaz
3,293 Points
Pedro Diaz
Pedro Diaz
3,293 Points

this is a very good question bc to be honest iv'e been dealing with the same issues. there has to be, or at least i hope, there is a way to position an element on the main banner image. mine being a simple self made button using a div and an <a> with an <h2>.. i have the same problem i've tried everything and the only thing that makes scene is media queries. but the obvious bad thing about this is that the position does not stay put.. it moves pretty much as soon as i resize .. it sounds doable, but too crazy to do media queries for a few pixels at a time ... i hope we can get help on this bc it does look like a very basic thing to know when building web pages.

note:

I also sort of dislike css background img deals hehe just because im still not too good at controlling how they work as i can with regular <img>.