Kevin Powell - Community•2mo ago

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

62 Replies

snxxwyy•2mo ago

If it was me I’d use grid for that layout, then it becomes responsive

Code-S ♛•2mo ago

Hmmmm... didn't know i could do that But ill watch a YouTube video on it

snxxwyy•2mo ago

yeah you can, it's pretty neat, i recommend becoming really familiar with grid, i'd probably do something like this

snxxwyy•2mo ago

Code-S ♛•2mo ago

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

snxxwyy•2mo ago

you have to specify that you want the divs to overlap otherwise they don't, something like this

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  grid-template-rows: 1fr auto;
}

.image {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.text {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  grid-template-rows: 1fr auto;
}

.image {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.text {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

vince•2mo ago

You can also use grid-template-areas too

Code-S ♛•2mo ago

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

snxxwyy•2mo ago

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;

Code-S ♛•2mo ago

My mom will beat me if I turned the PC on now

vince•2mo ago

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

Code-S ♛•2mo ago

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

clevermissfox•2mo ago

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

grid-template-columns: [img-start] 1fr [text-start] 5rem [img-end] 1fr [text-end];
& .my-img {grid-area: img;}
& .my-text {grid-area: text;}

grid-template-columns: [img-start] 1fr [text-start] 5rem [img-end] 1fr [text-end];
& .my-img {grid-area: img;}
& .my-text {grid-area: text;}

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

Gaming

Programming

Your Opinion