I know that this may sound a little stupid. I have some images on my website and I want them to go to the line they fit. (I have 3 images on top but in a phone there would be only one but on bigger monitors 4, and I don't want to use JavaScript)
.rows>* {
display: table;
width: 70px;
margin-right: 0%;
}
.rows img {
border-radius: 25px;
height: 15em;
width: 25em;
object-fit: cover;
margin: 10px 10px 0px 10px;
transition:
box-shadow .25s,
transform .25s;
}
h3 {
font-weight: 100;
text-align: center;
font-size: 1.5em;
margin-top: 0.2em;
margin-bottom: 10px;
}
.rows img:hover {
cursor: pointer;
box-shadow:
2px 1px
rgba(0, 0, 0, 1),
4px 3px
rgba(0, 0, 0, 0.9),
6px 7px
rgba(0, 0, 0, 0.8),
7px 8px
rgba(0, 0, 0, 0.7),
11px 10px
rgba(0, 0, 0, 0.6),
12px 11px
rgba(0, 0, 0, 0.5),
14px 13px
rgba(0, 0, 0, 0.4),
16px 17px
rgba(0, 0, 0, 0.3),
19px 18px
rgba(0, 0, 0, 0.2),
19px 20px
rgba(0, 0, 0, 0.1);
transform:
rotate(5deg)
skew(-1deg, -3deg);
transition:
box-shadow .5s,
transform .375s;
}
<div >
<div><a href="">
<img src="https://i.blogs.es/9cd4b9/1366_2000/840_560.jpg" alt="">
<h3>Valorant</h3>
</a></div>
<div><a href="">
<img src="https://cdn1.epicgames.com/offer/fn/PDP_2560x1440_2560x1440-bec2627607d1aeae77fc43d495900ddf" alt="">
<h3>Fortnite</h3>
</a></div>
<div><a href="">
<img src="https://phantom-marca.unidadeditorial.es/abfd01e815b28d5553ed7ba9fa2e9647/crop/0x0/1980x1112/resize/1320/f/jpg/assets/multimedia/imagenes/2022/03/16/16474267987028.jpg" alt="">
<h3>League of Legends</h3>
</a></div>
<div><a href="">
<img src="https://fs-prod-cdn.nintendo-europe.com/media/images/10_share_images/games_15/nintendo_switch_4/H2x1_NSwitch_Minecraft_image1600w.jpg" alt="">
<h3>Minecraft</h3>
</a></div>
<div><a href="">
<img src="https://hipertextual.com/wp-content/uploads/2022/01/call-of-duty.jpeg" alt="">
<h3>Call of Duty</h3>
</a></div>
<div><a href="">
<img src="https://cdn1.dotesports.com/wp-content/uploads/sites/4/2022/02/22143447/Garena-Free-Fire.jpg" alt="">
<h3>Free Fire</h3>
</a></div>
<div><a href="">
<img src="https://as01.epimg.net/meristation/imagenes/2021/12/12/noticias/1639306655_172365_1639307441_noticia_normal_recorte1.jpg" alt="">
<h3>Genshin Impact</h3>
</a></div>
<div><a href="">
<img src="https://pbs.twimg.com/media/FDgyy4fX0AAN_qb?format=jpg&name=small" alt="">
<h3>Clash Royale</h3>
</a></div>
<div><a href="">
<img src="https://theme.zdassets.com/theme_assets/1094427/189dce017fb19e3ca1b94b2095d519cc514df22c.jpg" alt="">
<h3>Rocket league</h3>
</a></div>
<div><a href="">
<img src="https://i.blogs.es/2787ba/robloxa/1366_2000.jpeg" alt="">
<h3>Roblox</h3>
</a></div>
<div><a href="">
<img src="https://play-lh.googleusercontent.com/bUg34NePWclty0hnX2bGZVPCsjsC-6VyQ4fHW9vpNFqSKAYRfa4fICuVWb4awKpsoT0" alt="">
<h3>Clash of Clans</h3>
</a></div>
<div><a href="">
<img src="https://img.redbull.com/images/c_limit,w_1500,h_1000,f_auto,q_auto/redbullcom/2018/12/14/7518db4d-58a6-4868-aa3c-748ad1dd6dd7/brawl-stars" alt="">
<h3>brawl stars</h3>
</a></div>
</div>
I want to make them like if it was a normal text that goes down automatically not that you have to program it too (for example display:inline, but it doesn't work)
Don't mind the content though :)
Thanks
CodePudding user response:
It's not a stupid question, what you mean Is responsiveness? So basically on a phone the images are displayed beneath each other, but on a laptop next to each other... and on a bigger monitor even more spread next each other?
If so.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
https://www.w3schools.com/html/html_responsive.asp
EDIT: By the way, If you go into developer tools there is a phone-tablet icon, click on it and you can test various widths for phones, tablets, monitors, and what not.