Adjust width

Author: felixff

resources/views/livewire/book-modal.blade.php

@@ -8,7 +8,8 @@
     </div>
     <div class="book-content">
         <div class="inner-container">
-            <div class="inner-header {{ !$modalContent->showImage && $modalContent->bookButtons[0]->type === 'signature' ? 'increased-font-size' : '' }}">
+            <div
+                class="inner-header {{ !$modalContent->showImage && $modalContent->bookButtons[0]->type === 'signature' ? 'increased-font-size' : '' }}">
                 {!! $modalContent->bookSubHeading !!}
             </div>
             <div class="main-content">
@@ -24,22 +25,26 @@
                         class="book-text {{ $modalContent->showImage ? '' : 'book-text-resize' }}">{!! $modalContent->bookText !!}</div>
                 </div>
             </div>
-            <div class="book-footer book-button-text {{ isset($modalContent->bookButtons[1]) ? 'margin-increase' : '' }}">{!! $modalContent->bookButtonText !!}</div>
+            <div
+                class="book-footer book-button-text {{ isset($modalContent->bookButtons[1]) ? 'margin-increase' : '' }}">{!! $modalContent->bookButtonText !!}</div>
             <div class="button-container button-container-override">
                 @foreach($modalContent->bookButtons as $button)
                     @if($button->type === 'standard')
-                        <button onclick="window.open('https://www.ebay.co.uk/itm/304251724807', '_blank')" class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
+                        <button onclick="window.open('https://www.ebay.co.uk/itm/304251724807', '_blank')"
+                                class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
                     @elseif($button->type === 'signature')
-                        <button onclick="window.open('https://www.ebay.co.uk/itm/304251735338', '_blank')" class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
+                        <button onclick="window.open('https://www.ebay.co.uk/itm/304251735338', '_blank')"
+                                class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
                     @elseif($button->type === 'book2')
-                        <button onclick="location.href='mailto:[email protected]'" class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
+                        <button onclick="location.href='mailto:[email protected]'"
+                                class="book-button button text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-auto">{{ $button->text }}</button>
                     @endif
                 @endforeach
             </div>
         </div>
     </div>
 </div>
-<style>
+<style lang="scss">
     .bg-white {
         background: none !important;
         overflow: hidden;
@@ -50,10 +55,15 @@ class="book-text {{ $modalContent->showImage ? '' : 'book-text-resize' }}">{!! $
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        width: 50% !important;
         margin-inline: auto;
     }
 
+    @media screen and (min-width: 1024px) {
+        .sm\:block {
+            width: 900px !important;
+        }
+    }
+
     .library {
         display: flex;
         flex-direction: row;

resources/views/livewire/character-bio-modal.blade.php

@@ -15,10 +15,15 @@
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        width: 30% !important;
         margin-inline: auto;
     }
 
+    @media screen and (min-width: 1024px) {
+        .sm\:block {
+            width: 900px !important;
+        }
+    }
+
     .close-button {
         display: none;
     }

resources/views/livewire/history-modal.blade.php

@@ -20,10 +20,15 @@
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        width: 40% !important;
         margin-inline: auto;
     }
 
+    @media screen and (min-width: 1024px) {
+        .sm\:block {
+            width: 900px !important;
+        }
+    }
+
     .text-background {
         background-image: url('/img/modal-content-container.png') !important;
         background-position: center;