Need help to keep css grid text overlay on top of images

HTML-CSS
1

Hey !

I’ve created a image grid, and I am trying to overlay text on top of each image, but the text seems to move around and is not responsive to the image or the grid…

the text is skull rings on top of the skull image… does anyone know what I am doing wrong?

Any help would be great!

Thanks!

2

Hello @ainneo, I tried to fix your code. Try this fix:

#image-text {
position: absolute;
top: 40%;
left: 30%;
color: red; 
 font-size: 3vw;
}

#image-text1 {
position: absolute;
top: 40%;
right: 30%;
color: red; 
font-size: 3vw;
}

The problem was due to using pixel units for positioning and because your text was not responsive. So, I used vw unit for font size but that is also to the proper solution since in screens with very low viewport width the texts might become unreadable and in large screen devices they would become quite large.
For a better method for fluid typography read this smashing magazine article:

https://www.smashingmagazine.com/2016/05/fluid-typography/

Another thing, don’t write several CSS property value pair on the same line. It makes the code hard to read.

1 Like
3

THANK YOU!!! I spent 5 hours trying to figure this out, I tried so many different things, and double checked my code to see if I misplaced items!!! THANK YOU this worked!!! And thank you for the advice.

Ainne

1 Like