Can the background remain consistent with the buttons as their number reduces from three to two to one?
I want the background to resize to fit the new width when three columns become two and then one, now it just stays fixed with three columns.
I want the background to stay with the buttons.
When the buttons go from 3 to 2 to 1, I want the background to stay attached to the buttons.
I want the background to stay behind the buttons.
Code: https://jsfiddle.net/42Lowjt7/4/
From 3Image
To 2Image
To 1Image
I tried using media queries, but I am not sure if that would work in the code.
.buttonContainerA { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 476px; gap: 10px; background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px); background-size: 10px 10px;}html,body { margin: 0; padding: 0;}body { background: #121212; padding: 0 8px 0;}.outer-container { display: flex; min-height: 100vh; /*justify-content: center; flex-direction: column;*/}.containerB { /*display: flex; justify-content: center; align-content: center; padding: 8px 8px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;*/ /* Enable scroll if needed */ /*display: flex; min-height: 100vh; justify-content: center; flex-direction: column; margin-top: auto;*/ margin: auto;}.modal-contentA { /*display: flex; flex-wrap: wrap; flex-direction: column;*/ /* added*/ /*min-height: 100%;*/ margin: auto; /*justify-content: center; align-content: center;*/}.buttonContainerA { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 476px; gap: 10px; /*background: red;*/ background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px); background-size: 10px 10px;}.playButtonA { flex-basis: 152px; /* width of each button */ margin: 0; /* spacing between buttons */ cursor: pointer;}.btn-primaryA { color: #fff; background-color: #0d6efd; border-color: #0d6efd;}.btnA { display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #0d6efd; border: 1px solid transparent; box-sizing: border-box; padding: 6px 12px; font-size: 16px; border-radius: 4px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal;}.btnq { -webkit-appearance: none; appearance: none; height: 80px; width: 80px; padding: 0; color: inherit; border: none; font: inherit; cursor: pointer; outline: inherit; margin: auto;}.btnA:hover { background-color: #0056b3; color: #ffffff;}.btnA:focus { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; /*box-shadow: 0 0 0 2px rgb(255 0 0 / 100%)*/}.exitB { position: relative; margin: 10px auto 0; inset: 0 0 0 0; width: 47px; height: 47px; background: black; border-radius: 50%; border: 5px solid red; display: flex; align-items: center; justify-content: center; /*margin: auto;*/ cursor: pointer;}.exitB::before,.exitB::after { content: ""; position: absolute; width: 100%; height: 5px; background: red; transform: rotate(45deg);}.exitB::after { transform: rotate(-45deg);}<div class="outer-container "><div class="containerB"><div class="modal-contentA"><div class="buttonContainerA"><button data-destination="#ba" class="playButtonA btn-primaryA btnA">Listening</button><button data-destination="#bb" class="playButtonA btn-primaryA btnA">Live Performance</button><button data-destination="#bc" class="playButtonA btn-primaryA btnA">On Loop</button><button data-destination="#bd" class="playButtonA btn-primaryA btnA">Audio Visual</button><button data-destination="#be" class="playButtonA btn-primaryA btnA">Lyric Video</button><button data-destination="#bf" class="playButtonA btn-primaryA btnA">Music Video</button><button data-destination="#bg" class="playButtonA btn-primaryA btnA">From The Vault</button><button data-destination="#bh" class="playButtonA btn-primaryA btnA">Mystery Box</button><button data-destination="#bi" class="playButtonA btn-primaryA btnA">Cover</button><button data-destination="#bj" class="playButtonA btn-primaryA btnA">Remix</button><button data-destination="#bk" class="playButtonA btn-primaryA btnA">Instrumental</button><button data-destination="#bl" class="playButtonA btn-primaryA btnA">Extended Mix</button><button data-destination="#bm" class="playButtonA btn-primaryA btnA">Duet</button><button data-destination="#bn" class="playButtonA btn-primaryA btnA">Acoustic</button><button data-destination="#bo" class="playButtonA btn-primaryA btnA">Rework</button></div><button class="exitB exit" type="button" title="Exit" aria-label="Close"></button></div></div></div>
