Image moving to bottom of text when resizing window

Question

For one of my webpages, I am finding that when I resize the window, the picture I have on the right side of the page (at full screen) will resize and move to the bottom of the text. How do I keep this image stationary so that when I resize it, it doesn't move but a scroll bar will appear allowing the user to scroll to the right to see the image? Please find my code below:

<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> words:</span></h3>
                 <span id="picture"></span>
                 <h4 id="blockquoteField"></h4>             
                <div id="density"></div>
              </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "image.png" alt = "right picture" style = "height: 580px;"> <!-- original height = 580 px, width = 780px -->
        </div>
        <div class="col-md-1">
        </div>
</div>

How can you expect someone to help you if you don't provide the CSS code, or even a fiddle or code snippet so we can see the actual problem? — Koby Douek, Aug 07 '17 at 05:12

Aslam · Answer 1 · 2017-08-07T05:44:30.500

It is happening because bootstrap is changing the columns to full width on smaller screens. In order to keep your current style change col-md's to col-xs's

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-1">
  </div>
  <div class="col-md-6 col-xs-6">
    <div class="row">
      <div id="info">
        <h3 id="rank"><span style="color:orange"> words:</span></h3>
        <span id="picture"></span>
        <h4 id="blockquoteField"></h4>
        <div id="density"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <img src="http://placehold.it/800x580" alt="right picture" style="height: 580px;">
    <!-- original height = 580 px, width = 780px -->
  </div>
  <div class="col-xs-1">
  </div>
</div>

With Responsive Image

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <div id="info">
        <h3 id="rank"><span style="color:orange"> words:</span></h3>
        <span id="picture"></span>
        <h4 id="blockquoteField"></h4>
        <div id="density"></div>
      </div>
    </div>
    <div class="col-xs-6">
      <img src="http://placehold.it/780x580" alt="right picture" class="img-responsive">
      <!-- original height = 580 px, width = 780px -->
    </div>
  </div>
</div>

Is there a way to have the scroll bar at the bottom so that all text and image sizes remain the same all the time? Right now, the image remains on the right but as the window gets smaller, it gets more smushed. — PythonSOS, Aug 07 '17 at 05:22
@PythonSOS, I have added another snippet with responsive image and some other dom changes. — Aslam, Aug 07 '17 at 05:44
Yes it will. The first snippet will keep the size equal. Just remove the height and it won't be squished. The second snippet is a responsive version where the image will not loose quality and aspect ratio. — Aslam, Aug 07 '17 at 05:54
@PythonSOS , The second snippet is better because on smaller screens you don't want the image to be so big where the users will again scroll to see it. It will simple make everything smaller. Another way you should checkout is adding the image to the background. — Aslam, Aug 07 '17 at 05:56

score 0 · Answer 2 · answered Aug 07 '17 at 05:29

give your fixed size, i assumed you wany your image doesnt resize it self and stay where it is when you resize the window

to make image not resizing give it a fixed size like

<img src="http://placehold.it/800x580" alt="right picture" style="height: 580px; width:780px;">

in order to make the image stationery you must also make fixed size in your <div> property and body depending in your code main tag

score 0 · Answer 3 · answered Aug 07 '17 at 06:29

Sorry If I don't understand your question correctly. I assume from the title: Image moving to bottom of text when resizing window

Do you want to vertically align the image and the text and make them to the next to each other whenever we resize the browser?

here is my code:

html:

<div class="row margin-center" id="center">
    <div class="col-md-1">
    </div>
    <div class="col-md-6 align-div" >
      <div class="row">
          <div id="info">
            <h3 id="rank"><span style = "color:orange"> words:</span></h3>
             <span id="picture"></span>
             <h4 id="blockquoteField"></h4>             
            <div id="density"></div>
          </div>
      </div>
    </div>
    <div class = "col-md-4 align-div" id="image-margin">
          <!-- I am using placeholder with your desired height-->
         <img src = "http://via.placeholder.com/580x780" alt = "right picture" class="img-valign"> <!-- original height = 580 px, width = 780px -->
    </div>
    <div class="col-md-1">
    </div>

css:

#center {
    width:1000px;
}
#image-margin{
  margin-left: 100px;
}
.align-div {
    vertical-align: middle;
    display: inline-block;

}

I make the width 1000px to make it larger so it will not stack up if we resize

the div is block level, and it will stack up each other, so I use inline-block, to align them

vertical align middle to make the text be centered vertically with the div box

source: How to make two div align side by side?

How to vertically align a DIV next to an image?

codepen: https://codepen.io/ronalto7777/pen/brgjRe

Image moving to bottom of text when resizing window

3 Answers3