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>