Chrome scrollbars resize html

Question

This is only happening in Chrome, not Firefox or IE -

I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:

When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:

This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.

I've tried using a flexbox footer instead of the vh method but that didn't help.

My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width">
      <link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
      <title>Good Boy Dog Care</title>
  </head>
  <body>
      <div class="index-content">
        <div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
      </div>
      <div class="footer">
      </div>
    </body>
</html>

And CSS:

    * {
    box-sizing: border-box;
    margin: 0;
}

.index-content {
    min-height: calc(100vh - 2em);
    padding: 0;
    margin: 0;
}

.footer {
    height: 2em;
    background-color: rgba(240, 100, 60, 1);
    width: 100%;
    cursor: default;
}

   #we-love-dogs-one {
        width: 34%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
    }

        #we-love-dogs-one-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

        #we-love-dogs-one-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 17px);
        font-size: 1.5em;
        display: inline-block;
        font-family: "Montserrat";
    }

    #we-love-dogs-two {
        width: 33%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
        font-family: "Montserrat";
    }

    #we-love-dogs-two-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

    #we-love-dogs-two-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 24.5px);
        font-size: 2em;
        display: inline-block;
        font-family: "Montserrat";
    }

        #we-love-dogs-three {
        width: 33%;
        display: inline-block;
        margin: 0;
        position: relative;
        text-align: center;
    }

        #we-love-dogs-three-image {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }

     #we-love-dogs-three-text {
        left: 0;
        position: absolute;
        width: 100%;
        color: white;
        top: calc(50% - 17px);
        font-size: 1.5em;
        display: inline-block;
        font-family: "Montserrat";
    }

Any help would be appreciated. Thanks!

Adam Smith - Microsoft Azure · Answer 1 · 2017-11-28T00:36:47.040

0

cliffgallagher@ , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.

   img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}





  Portrait Div
<div class="portrait">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="https://i.stack.imgur.com/xkF9Q.jpg">
</div>

edited Nov 28 '17 at 00:36

answered Nov 27 '17 at 23:19

Adam Smith - Microsoft Azure

2,495
2
12
24

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/18080845) – alex Nov 28 '17 at 00:23
Thanks alexi, I edited the answer to reflect the changes you mentioned. Adam – Adam Smith - Microsoft Azure Dec 05 '17 at 23:19

Chrome scrollbars resize html

1 Answers1