fix: responsiveness

Vatsim-Scandinavia · Aug 2, 2024 · b1b028b · b1b028b
1 parent e67f24e
commit b1b028b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/sass/_global.scss b/resources/sass/_global.scss
@@ -73,6 +73,14 @@ dl.copyable{
     padding-right: $grid-gutter-width;
 }
 
+.container-event{
+    width: 1000px;
+
+    @include media-breakpoint-down(md) {
+        width: 100%;
+    }
+}
+
 // Custom extras
 .front-cover {
     width: 100%;

diff --git a/resources/views/events/show.blade.php b/resources/views/events/show.blade.php
@@ -2,7 +2,7 @@
 @section('title', $event->title)
 @section('content')
 
-    <div style="width: 1000px;">
+    <div class="container-event">
 
         @if($event->image)
             <img src="{{ asset('storage/banners/' . $event->image) }}" alt="{{ $event->title }}" class="img-fluid">

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -9,9 +9,9 @@
             <ul class="list-group list-group-flush">
                 @if ($upcomingEvents->isNotEmpty())
                     @foreach($upcomingEvents as $event)
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                             <img src={{ asset('storage/banners/' . $event->image) }} height="100">
-                            <span>{{ $event->title }}</span>
+                            <span class="d-none d-md-block">{{ $event->title }}</span>
                             <div>
                                 <a href="{{ route('events.show', $event->id) }}" class="btn btn-info btn-sm">View Event</a>
                                 <a href="{{ route('calendar', $event->calendar) }}" class="btn btn-secondary btn-sm">View Calendar</a>