0

I'm trying to put some text in the upper left corner of a div that contains an image and the text. I can get it to work using CSS absolute positioning, but the text is not responsive and moves based on the screen size. I need the text to be responsive and adjusts based on the screen size so it stays in the same position relative to the image.

I'm also using bootstrap, which I don't think has an effect but it could be something deep under the covers that I don't know about.

Here is the code I'm currently using:

HTML

<div class="container-fluid"> 
  <div class="col-md-12 d-flex jumbo">
    <img class='img-fluid jumbo-image' 
         src= 'https://i.postimg.cc/8cXs8gZ9/working-horse.jpg' />
    <h2 class='jumbo-text'>Jungers Farm</h2>
</div>

CSS

.jumbo {
  position: relative;
}

.jumbo-image {
  margin-top: 85px;
  box-shadow: 15px 15px grey;
}

.jumbo-text {
  display: inline-block;
  font-size: 3em;
  color: #3386ff;
  text-shadow: 2px 2px 5px red;
  position: absolute;               /* remove from document flow */
  left: 5%;                         /* Left */
  top: 18%;                         /* Top */
}

As you can see in the following code pen, the text is not responsive and moves over the image as the screen changes. Thus the reason why my positioning is not a straight left: 0% and top: 0%. But it generally looks like what I want, more or less, when the screen is greater than 768px.

Codepen

Following is my attempt at using flexbox, but the text is displaying off screen to the right:

Codepen

Is this even possible with flexbox? If not, is it possible to get the text to be responsive using the straight CSS Absolute positioning method?

Robert Reynolds
  • 127
  • 2
  • 9
  • I've been able to at least mimic the behavior using both flexbox and straight CSS. However, I still cannot get it to be responsive in both text size and positioning. Am I going to have to use @media queries to get it to work? Or is there something else I'm missing? – Robert Reynolds May 09 '20 at 00:20
  • I was able to fix this problem with the following change: – Robert Reynolds May 25 '20 at 19:30

1 Answers1

0

So if I understand your question correctly the issue is that when the viewport size is updated the image scales according, thus resulting in the text no longer being positioned in the desired portion of the image. One potential workaround would be to remove the img tag and instead set it as the background-image of the parent div. Then you can absolutely position your h2 tag and no matter the viewport size your text will always remain over the background image. Of course with this method you will have to either explicitly set the width and height of the parent div, or use the padding-bottom trick to set the height. 

<div class="container-fluid"> 
<div class="col-md-12 d-flex jumbo" 
style="background:url(https://i.postimg.cc/8cXs8gZ9/working-horse.jpg); 
background-position:center center; background-size:cover; background- 
repeat:no-repeat; width:100%; padding-bottom:65%;">
  <h2 class='d-flex jumbo-text'>Jungers Farm</h2>
</div>
Austin737
  • 675
  • 1
  • 8
  • 15