Mike Cuddy Mike Cuddy - 3 months ago 9
CSS Question

Issue with text on a photo and making it responsive

I'm working on a web project in which I have a picture in the center of the screen. On top of that picture I have some text in a box. When the screen is full width I "almost" have it as large as I want. However, when I make the screen smaller the text moves all over the place.

I have the following code:



.imageFit {
padding-top: 5%;
width: 100%;
height: 100%;
}
.imageText span {
position: absolute;
top: 75%;
left: 40%;
padding: 10px;
text-align:center;
color: white;
background: rgba(0,0,0,0.7);
letter-spacing: -1px;
}

<div class="container">
<img class="imageFit" src="https://hd.unsplash.com/photo-1420593248178-d88870618ca0">
<div class="container">
<h1 class="imageText "><span>Begins with one step</span></h1>
</div>
</div>





Hint: Please let me know if more information is needed.

Answer

If you want to keep it all css, you can take out the tags and just do :before selector with content:

https://jsfiddle.net/ukdt27oz/1/

<div class="container">
    <img class="imageFit" src="https://hd.unsplash.com/photo-1420593248178-d88870618ca0">
</div>

 .imageFit {
   padding-top: 5%;
   width: 100%;
   height: 100%;
 }
 .container:before {
   content: "Begins with one step";
   color: black;
   position: absolute; 
   top: 50%;
   left: 35%;
   padding: 10px;
   text-align:center;
   color: white;
   background: rgba(0,0,0,0.7);
   letter-spacing: -1px;
   font-size: 5vw;
 }