Home » How To » Cara Membuat Responsive Float Pada Website

Cara Membuat Responsive Float Pada Website

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat responsive float dengan CSS.

Responsive Float

Gunakan kueri media dan setel lebar layar yang ditentukan (dalam piksel) untuk mengetahui kapan elemen harus melakukan float:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.float-right-sm {
  background-color: yellow;
}

.float-right-lg {
  background-color: pink;
}

@media (max-width: 768px) {
  .float-right-sm {
    float: right;
  }
}

@media (min-width: 769px) {
  .float-right-lg {
    float: right;
  }
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
</style>
</head>
<body>

<h2>Responsive Floats</h2>
<p>Kelas float-right-sm akan melakukan float tepat di layar yang sama atau KURANG DARI 768 piksel. Float-right-lg akan mengapung tepat di layar yang sama atau LEBIH BESAR DARI 769px. Perhatikan bahwa kami juga menggunakan clearfix untuk membersihkan float. </p>
<p> Ubah ukuran jendela browser untuk melihat hasilnya.</p>

<div class="clearfix">
  <span class="float-right-sm">Float right =&lt;768px</span><br>
  <span class="float-right-lg">Float right =&gt;769px</span><br>
</div>

</body>
</html>

You may also like