need help in grid and flex css in responsive

Codepen : https://codepen.io/Vicky-clowdy/pen/Bagejre

<div id='container'>  
        <div id='header'>
            <p>Tomato</p>
         </div>
        <div id='input'>
            <input type='text' />
         </div>
        <div id='buttons'>
            <button> button1 </button>
            <button> button2 </button>
         </div>
</div>

<div id='container'>  
        <div id='header'>
            <p>Tomato</p>
         </div>
        <div id='input'>
            <input type='text' />
         </div>
        <div id='buttons'>
            <button> button1 </button>
            <button> button2 </button>
         </div>
</div>

#container {
    background-color: white;
    min-height: 15dvh;
    max-height: 20dvh;
    height: auto;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

#header {
    color: black;
    font-weight: bold;
    font-size: 30px;
    transform: skewX(-15deg);
}
#input input{

    width: 300px;
    height: 50px;
    padding-left: 50px;
    outline: none;
    border: 1px solid black;
    border-left: unset;
}
#buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 20%;
}

#container {
    background-color: white;
    min-height: 15dvh;
    max-height: 20dvh;
    height: auto;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

#header {
    color: black;
    font-weight: bold;
    font-size: 30px;
    transform: skewX(-15deg);
}
#input input{

    width: 300px;
    height: 50px;
    padding-left: 50px;
    outline: none;
    border: 1px solid black;
    border-left: unset;
}
#buttons{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 20%;
}

So it wil be like : Tomato input box button1 button2 But now in resposnive i want it to like this : Tomato button1 button2 input box

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        background-color: white;
        min-height: 15dvh;
        max-height: 20dvh;
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    #header {
        grid-column: 1;
        display: inline;
    }
    #buttons {
        grid-column: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: green;
    }
    #input {
        grid-row: 2;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        background-color: white;
        min-height: 15dvh;
        max-height: 20dvh;
        height: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    #header {
        grid-column: 1;
        display: inline;
    }
    #buttons {
        grid-column: 2;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: green;
    }
    #input {
        grid-row: 2;
    }
}

the buttons goes beyond that 100% width

Vicky-clowdy

CodePen

Untitled

...

5 Replies

Chris Bolson•2mo ago

If you put all that code in a Codepen or similar it will be much easier for someone to take a look and possible help you.

vic•2mo ago

Ok wait

vic•2mo ago

https://codepen.io/Vicky-clowdy/pen/Bagejre

Vicky-clowdy

CodePen

Untitled

...

Chris Bolson•2mo ago

You are actually nearly there with what you have. You are just missing defining the column count for the "input" so that it spans the 2 columns

#input {
  grid-column: 1 / 3; 
  grid-row: 2;
}

#input {
  grid-column: 1 / 3; 
  grid-row: 2;
}

Also you don't need to deine the grid-column on the other 2 blocks as they will be calulated automatically. Alternatively, if you want to have yet more control and clarity, you could use grid-template-areas which I often find easier to understand and manipulate.
This also makes switching the positioning really easy within media queries (I realize that in your code for your larger screens you have actually used flex)

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "header buttons" "input input"
    }
    #header {
      grid-area: header;
    }
    #buttons {
      grid-area: buttons;
    }
    #input {
      grid-area: input;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {
    #container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "header buttons" "input input"
    }
    #header {
      grid-area: header;
    }
    #buttons {
      grid-area: buttons;
    }
    #input {
      grid-area: input;
    }
}

vic•2mo ago

Thank u so much

Gaming

Programming

need help in grid and flex css in responsive