so I have some images with text underneath them, I want them to be the same size. And that worked, but I also want them to be in a sort of "raster", not a visible. But so they are on 1 line. I don't even know if the CSS is correct. It would also be cool if once someone donates, their image and name would appear directly on the site, this is probably hard. So that the images align is good enough for me.
CSS
.col-md_staffblock{
margin: 30px auto;
margin-bottom: 5px auto;
padding: 10px 10px;
}
HTML
<h1 >DONATORS</h1>
<p>Donations help us keep our servers online 24/7.</p>
<div class="row stafflist">
<div class="col-md_staffblock">
<img width="100px;" src="img/JOSH_KING222.png">
<h2>JOSH_KING222</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/BuddySven.png">
<h2>BuddySven</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/AllexX.png">
<h2>AllexX</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/fond99.png">
<h2>fond99</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/II_Sebs.png">
<h2>II_Sebs</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/obesemessFTW69.png">
<h2>obesemessFTW69</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/DcemilO.png">
<h2>DcemilO</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="img/sonicboom62798.png">
<h2>sonicboom62798</h2>
<p>Donator</p>
</div>
</div>
And this html is the same for every image.
As I understood your question my solution for it goes like that:-
HTML I changed your images so that I can have a preview you can use your default images if you want
<h1 >DONATORS</h1>
<p>Donations help us keep our servers online 24/7.</p>
<div class="row stafflist">
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>JOSH_KING222</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>BuddySven</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>AllexX</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>fond99</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>II_Sebs</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>obesemessFTW69</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>DcemilO</h2>
<p>Donator</p>
</div>
<div class="col-md_staffblock">
<img width="100px;" src="https://picsum.photos/seed/picsum/100">
<h2>sonicboom62798</h2>
<p>Donator</p>
</div>
</div>
Normal CSS
.stafflist {
display: flex;
}
.col-md_staffblock {
margin: 10px
}
h2 {
font-size: 12px
}
Using CSS3 grids Just change the number 8 to whatever number you want and you'll get a grid in X columns
.stafflist {
display: grid;
grid-template-columns: repeat(8, 1fr) ;
}
Hope this helps
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments