Images not properly scale in browser?

Question

I've run into a small issue. I'm designing a 3 columned area that has images and text for each image. When scaling the site, the images do not bounce down a line and the text doesn't hold the image edge - only on the left side.

This seems like an easy fix, but I've spent the last two hours messing around with CSS elements and I can't seem to figure out the issue.

I should probably note that this "responsiveness" is being achieved only by HTML and CSS with percentages.

Any help would be greatly appreciated!

My Current CSS:

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

My Current HTML:

<section id="popularprebuilt">
  <div class="container">
    <div class="title">
      <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

Sample:

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

<section id="popularprebuilt">
  <div class="container">
    <div class="title">
      <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

Updated - hopefully, this is what you meant. Sorry, new to the site and how the formatting works. — TechJohnson, Oct 30 '17 at 00:56
I appreciate it. Thank you for the warm welcome and quick tip. ;) — TechJohnson, Oct 30 '17 at 01:08

score 0 · Answer 1 · answered Oct 30 '17 at 01:21

I recommend you to see my answer in this post: How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?

There I explained why sometimes our code doesn't act as I expected while scaling or resizing our screen.

After reading my answer you'll be able to understand and figure out the error in this code you wrote:

1) Saying to .precolumn of having a shorter width than its image inside, because you said: <img src="./img/low-line-glow.jpg" height="230" width="390"> (width="390")

#popularprebuilt .precolumn .pretitle {
    float: left;
    width: 33%;
    text-align: justify;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: capitalize;
  }

If you fix it, and you give learn how to create natural order in CSS, then you'll figure out how to make a lot of things in CSS without "unexpected behaviors"

In your case, even if you fix it following my answer it won't work because also you need to learn and use display:flex; for making really responsive designs.

Appreciate your feedback. After a bit of adjustment, as well as a crucial piece of code recommended by @Vincent1989, I have it working much better...and properly. Thank you! — TechJohnson, Oct 30 '17 at 01:32

Vincent1989 · Answer 2 · 2017-10-30T01:39:10.907

In order to make your images resize by itself when your parent divs get smaller, you need to add the following to your

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

Explanation:

By using max-width:100% you are telling all your images to stretch 100% base on your parent div, but not stretching bigger then the original image itself. As the width get stretch you will need height:auto to auto adjust itself, so that your images resize proportionally and not squish....

Example:

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

#popularprebuilt {
        padding: 0;
        margin: 0;
}

#popularprebuilt .title {
        text-align: center;
        padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
        float: left;
        width: 33%;
        text-align: inherit;
        padding: 0 20px 20px 0;
  }

  #popularprebuilt .precolumn_b {
        float: inherit;
        width: auto;
        text-align: center;
        text-transform: uppercase;
        padding: 0 0 46px 0;
  }

  #popularprebuilt .precolumn .pretitle {
        float: left;
        width: 33%;
        text-align: justify;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: capitalize;
  }

  #popularprebuilt .precolumn .preprice {
        float: right;
        text-align: justify;
        font-size: 12px;
        letter-spacing: 0;
  }

<section id="popularprebuilt">
  <div class="container">
        <div class="title">
              <h1>Popular Prebuilt Packages</h1>
        </div>
        <div class="precolumn">
              <a href="">
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">low line glow</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">sunshine</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">top heavy</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">simply flat</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">forty-five</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
                    <p class="pretitle">right aligned</p>
                    <p class="preprice">$9.99</p>
        </div>            

    <!--Popular Prebuilt Packages Buttons-->
        <div class="precolumn_b">
            <button class="button_2"><span>Browse all grpahics</span </button>
            <button class="button_3"><span>I want a custom design</span </button>
        </div>
    </div>
    </section>

Additional:

The above example will run into issue where the div will not align to left properly and causing blank on one side, this is because on the varying text's length on each divelement. To fix the issue you can refer solution below.

HTML Fix:

Move class="title" outside class="container"

From:

<div class="container">
   <div class="title">
       <h1>Popular Prebuilt Packages</h1>
    </div>
    .......
</div>

To:

<div class="title">
   <h1>Popular Prebuilt Packages</h1>
</div>
<div class="container">
    .......
</div>

CSS Fix:

#popularprebuilt .precolumn:nth-child(2n+1){
  clear:both;
}

Explanation:

You need to move class="title" out of the way so that you can target every 1, 3, 5, 7..... elements. Adding clear:both; will force the div to be cleared and land right below each div.

Example:

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

#popularprebuilt .precolumn:nth-child(2n + 1) {
  clear: both;
}

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

<section id="popularprebuilt">

  <div class="title">
    <h1>Popular Prebuilt Packages</h1>
  </div>

  <div class="container">

    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

Thank you so much! This fixed my issues, as well as other issues I was having. Appreciate your feedback. — TechJohnson, Oct 30 '17 at 01:28
You are welcome, I have add-on something extra in case you ran into the blank divs issue. — Vincent1989, Oct 30 '17 at 01:41

score 0 · Accepted Answer · answered Oct 30 '17 at 01:46

Couple of Things first off:

Media Queries: Try to use media queries in your breakpoints

Images: Set the image width to 100% to its parent container instead of fixed width.

Padding: You should count for the padding and margin of your container. In your code, you divided the container by three, but you had padding of 20px which was overlapping.

This is your revised code:

CSS:

#popularprebuilt {
        padding: 0;
        margin: 0;
}

#popularprebuilt .title {
        text-align: center;
        padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
        float: left;
        width: 29.3333%;
        text-align: inherit;
        padding:0 2%;

}

#popularprebuilt .precolumn img{
    width:100%;
}
  #popularprebuilt .precolumn_b {
        float: inherit;
        width: auto;
        text-align: center;
        text-transform: uppercase;
        padding: 0 0 46px 0;
  }

  #popularprebuilt .precolumn .pretitle {
        float: left;

        text-align: justify;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: capitalize;
  }

  #popularprebuilt .precolumn .preprice {
        float: right;
        text-align: justify;
        font-size: 12px;
        letter-spacing: 0;
  }

 @media all and (max-width:1000px){
#popularprebuilt .precolumn {
        float: left;
        width: 46%;
        text-align: inherit;
        padding:0 2%;

    }

}

 @media all and (max-width:600px){
#popularprebuilt .precolumn {
        float: left;
        width: 96%;
        text-align: inherit;
        padding:0 2%;

    }

}

HTML:

  <section id="popularprebuilt">
   <div class="container">
    <div class="title">
          <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
          <a href="">
                <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">low line glow</p>
          <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">sunshine</p>
          <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">top heavy</p>
          <p class="preprice">$9.99</p>
    </div>

     <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">forty-five</p>
          <p class="preprice">$9.99</p>
     </div>


   <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
        <button class="button_2"><span>Browse all grpahics</span> 
  </button>
        <button class="button_3"><span>I want a custom design</span> 
  </button>
    </div>
   </div>
   </section>

Check this JsFiddle.. This is a complete work.

Hope it helps.

Appreciate the help. Still learning how to code and such. Coming from strict design, this is a huge learning curve. — TechJohnson, Oct 30 '17 at 01:56

Images not properly scale in browser?

3 Answers3