Responsive Kutu Yapma

12-12-2018, 01:51:08

#1

yumlusoft

Merhaba yanyana iki kutu yapmak istiyorum responsive olması gerekiyor ama yardımcı olanlara şimdiden teşekkürler.

12-12-2018, 02:23:13

#2

WPServis

HTML

<div class="kutular">
<div class="kutu k1">
BURAYA NE LAZIMSA...
</div>

<div class="kutu k2">
BURAYA NE LAZIMSA...
</div>
</div>

CSS

.kutular {
max-width:1200px;
display:block;
margin:auto;
width:100%;
background:#ddd;
}
.kutu {
float:left;
width:50%;
display:inline-block;
background:#fff;
}
.k1 {
background: #f2952b;
}
.k2 {
background:#15d6ef;
}
@media screen and (max-width: 680px) {
  .kutu {
  width:100%;
  }
}

12-12-2018, 03:18:01

#3

bybb35

bootstrap neden kullanmıyorsun?

12-12-2018, 04:36:24

#4

codeksper

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>KUTULAR</title>
<style type="text/css">
.kutular{display:grid;grid-template-columns:1fr 1fr;grid-gap:2vw;padding:20px;}
.kutu{background:#bbb;padding:100px 0;}
@media only screen and (max-width:800px){
.kutular{grid-template-columns:1fr;grid-gap:2vh;}
}
</style>
</head>
<body>
<div class="kutular">
<div class="kutu"></div>
<div class="kutu"></div>
</div>
</body>
</html>