Text overflowing due to position absolute with Bootstrap 3

1

Hi Freecodecampers,

I am using the position absolute property to overlay text on images. However, I want it to to look good on mobile as well, but as soon I go to a smaller screen the text starts slipping over and beneath other content. Everytime I mess with the position attribute it just messes up everything but a problem is not solved. Do you have any ideas how to fix this?

You can find my tribute page codepen here:

The issue occurs with the first first bit of the text and the third bit of text. I am using bootstrap 3 grid system.
All feedback and tips are welcome!

2

Hey. Wouldn’t it be easier to use a background-image instead of having your text absolute positioned? You’ll just need to remove the position:absolute from your text, and then style your container div like this:

.zero-pad {
    background-image: url(https://image.ibb.co/kCDrrv/naomi_2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px; /* Add or remove as much as you wish */
}
1 Like
3

Thanks for the tip @noyb . This is indeed how I initially started this out, however, if I specify the background as provided, then the whole bootstrap column collapses as it’s responsive and does not take into regard the dimensions of the background image. Another issue is, I believe to be correct semantically, the image in this case is considered a piece of content, so it should be within an image tag or equivalent. If you have any further thooughts, please let me know :slight_smile:

4

Honestly, I wouldn’t know about the semantic; I’m mostly the “if it looks good it’s fine” type of guy. Maybe somebody else could comment on that.

Aside from that, the column collpases if your inner text is absolute positioned. If it isn’t the column will adjust to its content and with some padding, the result will be the same as you currently have as you can see here.

Edit: I only modified the header in the fiddle.

1 Like
5

@noyb, thanks a bunch, that worked! What I guess would be even better if the text would slide under the image when screen size is small. I guess I can JS that or discover what this media query thing is exactly. Tips are welcome :slight_smile: