Screenshot (The layout i look for) :
My codes
JavaScript
x
22
22
1
body {2
background: #000000 50% 50%;3
overflow-x: hidden;4
overflow-y: hidden;5
}6
.video{7
margin: 50px 20px;8
display: grid;9
place-items: center;10
height: 80vh;11
}12
.left {13
text-align: left;14
}15
.right {16
text-align: right;17
}18
.container {19
display: flex;20
align-items: center;21
justify-content: center;22
}JavaScript
1
29
29
1
<head>2
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">3
</head>4
<body>5
<div class="container">6
7
8
<div class="left">9
<p style="color: blue;">Title</p>10
<img src="https://place-hold.it/336x280" /> <br>11
<p style="color: blue;">Title</p>12
<img src="https://place-hold.it/280x500" />13
</div>14
15
16
<div class="video">17
<p style="color: blue;">Title</p>18
<img src="https://place-hold.it/500x500" />19
20
</div>21
22
<div class="right">23
<p style="color: blue;">title</p>24
<img src="https://place-hold.it/336x280" /> <br>25
<p style="color: blue;">Title</p>26
<img src="https://place-hold.it/280x500" />27
</div>28
</div>29
</body>My current code : Works fine with large desktop, big screen and resolution But, When i check it with small desktop, mobile and small resolution screen, than the layout getting missed up. How to i make this responsive?
Advertisement
Answer
Removed most of the code from your CSS and used flex-wrap to wrap the divs if screen shrinks and added a justify-content:space-between for the space.
Change:added button inside video div since video itself is a div i gave it display:flex and changed the flex-direction:column align-items to center them and gap:30px between p img button
JavaScript
1
23
23
1
body {2
background: #000000 50% 50%;3
4
}5
6
.container {7
display: flex;8
align-items: center;9
justify-content: space-between;10
flex-wrap: wrap;11
12
}13
.video {14
display: flex;15
flex-direction: column;16
align-items: center;17
gap: 30px;18
}19
20
.vid-btn {21
padding: 20px 150px;22
23
}JavaScript
1
25
25
1
<div class="container">2
3
4
<div class="left">5
<p style="color: blue;">Title</p>6
<img src="https://place-hold.it/336x280" /> <br>7
<p style="color: blue;">Title</p>8
<img src="https://place-hold.it/280x500" />9
</div>10
11
12
<div class="video">13
<p style="color: blue;">Title</p>14
<img src="https://place-hold.it/500x500" />15
<button class="vid-btn">Button</button>16
17
</div>18
19
<div class="right">20
<p style="color: blue;">Title</p>21
<img src="https://place-hold.it/336x280" />22
<p style="color: blue;">Title</p>23
<img src="https://place-hold.it/280x500" />24
</div>25
</div>