fixed badge positioning breaking with more than 3 badges

This commit is contained in:
Thomas G 2022-08-09 03:47:41 +10:00
parent a49de3a6a0
commit c4a202544c
2 changed files with 17 additions and 2 deletions

View File

@ -193,6 +193,21 @@
align-items: center; align-items: center;
} }
.badges {
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
align-items: center;
}
.badgecontainer {
width: 120px;
padding: 3px;
}
#navbarlogincontainer, #navbarlogincontainer,
#navbarsignedincontainer { #navbarsignedincontainer {
position: relative; position: relative;

View File

@ -81,11 +81,11 @@
</div> </div>
<br> <br>
<h2>ARCHBLOX Badges</h2> <h2>ARCHBLOX Badges</h2>
<div style="white-space:nowrap"> <div class="badges">
@foreach ($badges as $badge) @foreach ($badges as $badge)
@foreach ($user->badges as $user_badge) @foreach ($user->badges as $user_badge)
@if ($badge->id == $user_badge) @if ($badge->id == $user_badge)
<div style="width:120px;display:inline-block"> <div class="badgecontainer">
<img alt="{{ $badge->description }}" src="/img/badges/{{ $badge->id }}.png" width="75px" height="75px" /> <img alt="{{ $badge->description }}" src="/img/badges/{{ $badge->id }}.png" width="75px" height="75px" />
<h3>{{ $badge->title }}</h3> <h3>{{ $badge->title }}</h3>
</div> </div>