CAN YOU MAKE THE CODE BELOW RESPONSIVE BY ADDING MEDIA QUERIES? HTML CODE: Document Ücretsiz Kargo Tüm Siparişlere Ücretsiz İade Garantisi 30 gün içinde iade İletişim Destek Tüm sorularınız için Güvenli Ödeme Tüm kredi kartlarına CSS CODE: @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500;600;700;800&display=swap'); .row{ border-radius: 8px; background: white; padding:20px; display: flex; justify-content: center; } #column-1, #column-2, #column-3, #column-4{ width:250px; height:124px; margin: 30px; padding: 15px; float:left; display: flex; } .about-image{ flex: 0 0 65%; width: 40px; height: 40px; margin-top:30px; } .about-text{ flex: 1; font-family: Lexend; font-style: normal; font-weight: normal; font-size: 18px; line-height: 20px; letter-spacing: 0.2px; color: #161D25; margin-left: -25px; } .about-content{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 16px; line-height: 22px; color: #5A7184; } .about-title{ width: 200px; padding-right: 50px; margin-bottom: -15px; padding-top: 7px; } #column-3{ padding-right: 50px; margin-bottom: -15px; } #column-4{ padding-right: 150px; }
CAN YOU MAKE THE CODE BELOW RESPONSIVE BY ADDING MEDIA QUERIES?
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="app.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous"
/>
<title>Document</title>
</head>
<body>
<div class="row-s">
<div id="column-1" class="column">
<img src="Shipping.svg" class="about-image" />
<div class="about-text">
<h4 class="about-title">Ücretsiz Kargo</h4>
<p class="about-content">Tüm Siparişlere Ücretsiz</p>
</div>
</div>
<div id="column-2" class="column">
<img src="money.svg" class="about-image" />
<div class="about-text">
<h4 class="about-title">İade Garantisi</h4>
<p class="about-content">30 gün içinde iade</p>
</div>
</div>
<div id="column-3" class="column">
<img src="contact.svg" class="about-image" />
<div class="about-text">
<h4 class="about-title">İletişim Destek</h4>
<p class="about-content">Tüm sorularınız için</p>
</div>
</div>
<div id="column-4" class="column">
<img src="card.svg" class="about-image" />
<div class="about-text">
<h4 class="about-title">Güvenli Ödeme</h4>
<p class="about-content">Tüm kredi kartlarına</p>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/51471d14f6.js"
crossorigin="anonymous"
></script>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500;600;700;800&display=swap');
.row{
border-radius: 8px;
background: white;
padding:20px;
display: flex;
justify-content: center;
}
#column-1, #column-2, #column-3, #column-4{
width:250px;
height:124px;
margin: 30px;
padding: 15px;
float:left;
display: flex;
}
.about-image{
flex: 0 0 65%;
width: 40px;
height: 40px;
margin-top:30px;
}
.about-text{
flex: 1;
font-family: Lexend;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 20px;
letter-spacing: 0.2px;
color: #161D25;
margin-left: -25px;
}
.about-content{
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px;
color: #5A7184;
}
.about-title{
width: 200px;
padding-right: 50px;
margin-bottom: -15px;
padding-top: 7px;
}
#column-3{
padding-right: 50px;
margin-bottom: -15px;
}
#column-4{
padding-right: 150px;
}
Step by step
Solved in 2 steps with 6 images
