Shopify Question posted in
The Shopify help center can be found here.

Div not expanding with pictures – Shopify

Okay so first off i’ve tried the overflow:hidden; but it didnt work so basically this is what my div is looking but when i add more images to it the div does not expand with it.

What the div looks like
enter image description here

.working{
    width: 600px;
    height: 2000px;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
<div class="working">



<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
    </div>
Tags:

2

Answers


  1. 0

    Its because you have a fixed height.
    Try removing height:2000px.

    .working{
    width: 600px;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
    <div class="working">



<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p><p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>

    </div>
    Login or Signup to reply.
  2. 0

    Removing height:2000px; and add height:auto;. It will solve your height problem. Height will increase when you add new div or p in it.

    .working{
    width: 600px;
    height:auto;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
    <div class="working">



<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
     <p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Testing 1</p>
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Testing 2</p>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search