How do I bootstrap an image and text side by side but when the screen is small the text goes over the image?

Question

Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.

.html:

<div class="container-fluid"> 
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
        </div>
        <div class="col-xs-3 col-md-6">
            <div class="first"> 
                NAME HERE
            </div>
            <div class="second"> 
                DEVELOPER
            </div>
        </div>
    </div>
</div>

.css

.first{
    font-family: Cinzel;
    color: black;
    font-size: 45px;
    font-weight: normal;
}

.second{
    font-family: Cinzel;
    color: black;
    font-size: 20px;
    font-weight: normal;
}

what do you mean by "I want the text to go over the image and the image and text shrink" ? it's not clear to me what your desired outcome is — blurfus, May 09 '17 at 23:35
I want the text to overlap the image. The text would be in the center, on top of the image. — Phoenix Holmes, May 09 '17 at 23:36

score 0 · Answer 1 · edited May 23 '17 at 11:54

You could use media queries to get text over the image. Override position attribute as it is shown here How to position text over an image in css

Also, there is no need to use col-xs-9 and col-xs-3. You can use col-xs-12. Atleast col-xs-3 is not needed (col-xs-9 is a choice).

Something similar to this (not tested):

<div class="container-fluid cntr"> 
    <div class="row">
        <div class="col-xs-12 col-md-6 image1">
            <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
        </div>
        <div class="col-xs-12 col-md-6 text1">
            <div class="first"> 
                NAME HERE
            </div>
            <div class="second"> 
                DEVELOPER
            </div>
        </div>
    </div>
</div>

@media screen and (max-width: 767px) {
.cntr {
  position: relative;
}
.image1 {
  position: absolute;
  left: 0;
  top: 0;
}
.text1 {
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
}
}

score 0 · Accepted Answer · answered May 10 '17 at 01:17

It's tricky to answer as you haven't specified what you mean by "too small" or how big your current image is. The smallest device is probably an old iPhone (320px). The following works for 320px but not below as the margin-left here is in pixels (percentage would be ideal). There is a jsbin here

.first {
  font-family: Cinzel;
  color: black;
  font-size: 45px;
  font-weight: normal;
}

.second {
  font-family: Cinzel;
  color: black;
  font-size: 20px;
  font-weight: normal;
}

@media screen and (max-width:320px) {
  .first {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    left: 0!important;
    margin-left: -300px;
    color: white;
  }
  .second {
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    margin-left: -300px;
    color: white;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <div class="container-fluid"> 
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819">
        </div>
        <div class="col-xs-3 col-md-6">
            <div class="first"> 
                NAME HERE
            </div>
            <div class="second"> 
                DEVELOPER
            </div>
        </div>
    </div>
</div>

full-screen the snippet and use a brower resizer to get the effect or just resize in jsbin. You get the idea of how-to anyway — Rachel Gallen, May 10 '17 at 01:20

How do I bootstrap an image and text side by side but when the screen is small the text goes over the image?

2 Answers2