Your Opinion
Hi guys
I was wondering how do make these two divs responsive on ipad/wide screens as they are moved using position relative
everyones opinion matters so drop it
![No description](https://cdn.answeroverflow.com/1266021782083600474/Screenshot_40.png)
62 Replies
If it was me I’d use grid for that layout, then it becomes responsive
Hmmmm... didn't know i could do that
But ill watch a YouTube video on it
yeah you can, it's pretty neat, i recommend becoming really familiar with grid, i'd probably do something like this
![No description](https://cdn.answeroverflow.com/1266080836571238411/example.png)
it is too complicted for me the content just doesnt overlap idk why? watched a video of kevin but he used 1/2 values and idk those, but i did come across a video in which a guy used flexbox and just gave -margin to overlap
you have to specify that you want the divs to overlap otherwise they don't, something like this
You can also use
grid-template-areas
too![No description](https://cdn.answeroverflow.com/1266126612563493005/Screenshot_42.png)
![No description](https://cdn.answeroverflow.com/1266126635015471196/Screenshot_41.png)
i am just too much of a beginner
ig its just so confusing
like i did play around and got the box on the image but it just wont go to the bottom
toooo hard for me
IT HAS BEEN OFFICIALLY 2 HOURS i was trynna figure this grid thing
🥱
going to sleep
you don't have 3 columns in your code, you have
1fr 2fr
. the third column is essential for the overlap, you need to put grid-template-columns: 3fr 1fr 2fr;
My mom will beat me if I turned the PC on now
Man what are you doing trying to learn coding then 🤣 enjoy your youth
Plenty of time to stress about this stuff in a few years or whenever
Take advantage of your youth 🙂 and chill
you see my grades aint looking so good so i have no option 😔
trying rn
i am tired BRUH it just doesnt overlap the image man
idk why
i am moving to the next section for now
You can't overlap cells with grid-template-areas unfortunately, but if you just want access to the grid-area name you can write your template with named lines
And you can also specify different names for columns vs rows if you need to then assign it to the relevant grid-column or grid-row property on the child .
I love area names so anything I have to change in a query is all changed on the parent. I don't have to revert all the children's fixed cells
grid-column: 2/6; grid-row: 1/3
on every child