Need help stacking images |
Need help stacking images |
JUI43555 |
Mar 11 2023, 10:09 PM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
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 |
Mar 11 2023, 10:13 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
Mar 11 2023, 10:29 PM
Post
#3
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
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 |
Mar 12 2023, 05:58 AM
Post
#4
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
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 |
Mar 12 2023, 06:08 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
Apr 6 2023, 06:28 AM
Post
#6
|
Group: Members Posts: 7 Joined: 2-April 23 Member No.: 28,883 |
You can use flex for this purpose.
|
Lo-Fi Version | Time is now: 25th May 2024 - 07:05 AM |