- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I am using the skeleton framework for a responsive design and I am having this issue where I have overlayed text on an image. The image resizes to fit the window but the text does not. How do I make it responsive like the image?
A link would be helpful but font-sizes in ems might help
Make sure the parent container of your text has a relative width. (%)
If you are putting text over an image, why are you not using the background-image property?
Wouldn’t that make more sense?
Also, you haven’t defined what responsive text means….do you want it to scale with the image…pretty sure that’s going to be hard without javascript.?
As I said, we need to see it live..or in Codepen. and a more complete understanding of what it is you are trying to do.
On the off chance that your doing something likefont-size: 80%
and wondering why its always the same size regardless of the resolution, the percentage there would be a percentage of a previously defined font size (probably the automatically assumed/added route of the document which would be the )
CSS only solution to this would be (without using fit text js or others) is to style your overlayed text with class and in media queries give it appropriate font size based on best fit at each different viewport width.