Grid Template Areas Causing Overflow – Cannot fix [closed]

Question

I’m trying to make a series of manipulative buttons which resize with grid, but they keep expanding beyond their container.

I’ve tried using overflow hidden, max-width and various other things which should work (in my head at least). I’ve also tried going through chat gpt’s recoomendations but it can’t see anything wrong wit the code.

I also got it to work once by messing around with max widths but then something happened and it reverted back to normal.

/* ============================= */
/* Mobile First Styling ======== */
/* ============================= */

body {
    max-width: 90%;
    background-color: pink;
}

main {
    max-width: 100%;
    background-color: blue;
}

.wrapper {
 max-width: 100%;
 background-color: black;
}

span {
    display: inline-block;
    background-color: white;
}

.grid-container {
    grid-template-areas: 
    "one two"
    "three four"
    "five six"
    "seven seven";
 box-sizing: border-box;
 max-width: 100%;
 display: grid;
 padding: 1em;
 gap: 1em;
 margin: auto;
 background-color: red;
border: 2px solid white;
}

.slider-item {
 height: 6em;
 border-radius: 1em;
 background: rgb(10,10,10);
 background: linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(144,144,144,1) 48%, rgba(38,38,38,1) 100%);
}

.slider-item:nth-child(1) {
    grid-area: one;
}

.slider-item:nth-child(2) {
    grid-area: two;
}

.slider-item:nth-child(3) {
    grid-area: three;
}

.slider-item:nth-child(4) {
    grid-area: four;
}

.slider-item:nth-child(5) {
    grid-area: five;
}

.slider-item:nth-child(6) {
    grid-area: six;
}

.slider-item:nth-child(7) {
    grid-area: seven;
}

<header class="page-header"> 
</header>
    <div class="wrapper">
    <section class="grid-container">
        <div class="slider-item postion-y-container">
            <!-- Use label instead of heading as funciton relates to input form. -->
            <label class="slider-label"></label>
            <!-- Values placed in div tag as multiple values needed. -->
            <div class="slider-values"></div>
            <!-- Name tags neccessary to link with label. -->
            <input type="range" name="position-y" class="position-y-slider" max="600" min="0" value="0">
        </div>
        <div class="slider-item position-x-container">
            <label class="slider-label"></label>
            <div class="slider-values"></div>
            <input type="range" name="position-x" class="position-x-slider" max="800" min="0" value="0">
            <span class="output"></span>
        </div>
        <div class="slider-item size-container">
            <label class="slider-label"></label>
            <div class="slider-values"></div>
            <input type="range" name="size" class="size-slider" max="2" min="0" value="0">
        </div>
        <div class="slider-item opacity-container">
            <label class="slider-label"></label>
            <div class="slider-values"></div>
            <!-- Step 0.01 added so that slider will scale in decimal places. -->
            <input type="range" name="opacity" class="opacity-slider" max="1" min="0" step="0.01" value="1">
        </div>
        <div class="slider-item shape-type-container">
            <label class="slider-label"></label>
            <div class="slider-values"></div>
            <input type="" name="shape" class="shape-type-selector">
        </div>
        <div class="slider-item hex-container">
            <label class="slider-label"></label>
            <div class="slider-values"></div>
            <input type="" name="hex" class="hex-input">
        </div>
        <div class="slider-item rgba-container">
            <label class="slider-label">RGBA
            <div class="slider-values"></div>
            <!-- Ok to have multiple input tags with same name -->
            <input type="range" name="rgba" class="r-slider" max="255" min="0" value="0">
            <input type="range" name="rgba" class="g-slider" max="255" min="0" value="0">
            <input type="range" name="rgba" class="b-slider" max="255" min="0" value="0">
            <input type="range" name="rgba" class="a-slider" max="1" min="0" step="0.01" value="1">
            </div>
            </label>
        </div>
    </section>
    <div class="object-container">
    <div class="object"></div>
    </div>
</main>

Leave a Comment Cancel reply