CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

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
16,595 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

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>.