Need help stacking images Options

[JUI43555]

Hi, wondering how i would stack the three circular images when the screen size is reduced (iphone etc)

Currently they don't stack but remains static in their current position.

[pandy]

Float them left. Assuming you don't mean stack like in on top of each other but rather that they should go under (below) each other when there isn't room for them all.

[JUI43555]

Float them left. Assuming you don't mean stack like in on top of each other but rather that they should go under (below) each other when there isn't room for them all.

Thankyou! I seem to be doing something wrong though, seems they are now on top of each other rather than side to side.

CODE

/* Section images are in */

.teddy__images {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Individual images */

.teddy {
    width: 100px;
    height: 100px;
    border-radius: 50em;
    margin: 1em;
}
}

[coothead]

Hi there JUI43555,

here is an alternative method that may better suit your requirements...

HTML

CODE

<div class="teddy_images">
<img src="https://via.placeholder.com/100x100/9c0618/fff?text=ted 1" alt="teddy 1">
<img src="https://via.placeholder.com/100x100/9c0618/fff?text=ted 2" alt="teddy 2">
<img src="https://via.placeholder.com/100x100/9c0618/fff?text=ted 2" alt="teddy 3">
</div>

CSS

CODE

.teddy_images {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   padding: 0.5em;
   background-color: #faebd7;
}
.teddy_images img {
    width: 6.25em;
    height: 6.25em;
    border-radius: 50%;
    margin: 1em;
    box-shadow: 0 0 0.75em rgba( 0, 0, 0, 0.75 );
  }
@media ( max-width: 27em ) {
.teddy_images {
   flex-direction:column;
   align-items: center;
  }
}

coothead

[pandy]

Thankyou! I seem to be doing something wrong though, seems they are now on top of each other rather than side to side.

You mean they are under each other even when there's space enough for them to be side by side?

It's hard to say what the problem is without seeing everything, both HTML and the rest of the CSS. But I *think* you floated the box the images are in rather than the individual images within the box. So my *guess* is you apply float: left to .teddy rather than to .teddy__images .

[Stulfa]

You can use flex for this purpose.