Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana Mengatasi Ukuran Border Yang Berubah Ketika Dikecilin Ukuran Browsernya
Gan Saya Mau bertanya, tapi sebelumnya saya mau bercerita sedikit :v. Saya baru mengikuti tutorial diSekolahKoding sampai di CSS, dan diakhir video pembelajaran tersebut mas hilman menyarankan untuk melatih kemampuan dengan membuat project. dan akhirnya saya membuat sebuah halaman sederhana dengan background blue dan sebuah border dengan text didalamnya, namun ketika saya kecilkan ukuran browsernya masalah muncul, ukuran bordernya tidak sesuai dengan yg saya tuliskan diawal. Pertanyaan saya bagaimana mengatasi ukuran border yang berubah ketika saya mengecilkan ukuran borwser tersebut?
Makasih ^_^
Ini Keadaan Awal Browser
dan ini Keadaan Ketika Saya Kecilin Ukuran Browsernya
Ini kodenya :
<!DOCTYPE html>
<html>
<head>
<link href="wd.jpg" rel="shortcut icon">
<link href="http://fonts.googleapis.com/css?family=Baloo+Thambi" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
body {
font-family : 'Baloo Thambi';
background : deepskyblue;
color : #fff;
}
#find-me-on{
text-align : center;
}
a {
text-decoration : none;
}
h2:hover {
color : orange;
background : yellow;
}
h2:focus {
;
}
#find-me-on-instagram {
display : inline-block;
border : 5px solid #fff;
border-radius : 10px;
margin-left : 34%;
width : 15%;
text-align : center;
text-decoration : none;
}
#find-me-on-facebook {
display : inline-block;
border : 5px solid #fff;
border-radius : 10px;
margin-left : 1%;
width : 15%;
text-align : center;
text-decoration : none;
}
</style>
<script language='JavaScript'>
var txt="[WellKamz] - Tempat Menemukan Hal-Hal Menarik Seputar Teknologi ";
var speed=100;
var refresh=null;
function action() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresh=setTimeout("action()",speed);}action();
</script>
</head>
<body>
<h1 id="find-me-on">Find me on :</h1>
<h2 id="find-me-on-instagram"><a href="http://www.instagram.com/kammalz">Instagram</a></h2>
<h2 id="find-me-on-facebook"><a href="https://www.facebook.com/profile.php?id=100010956046050">Facebook</a></h2>
</body>
</html>
3 Jawaban:
gunakan CSS3 @media Rule
contoh
border : 4px;
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
#colmn {
border : 1px;
}
}
jadi awalnya border 4px, ketika screen size <= 480px border akan ubah mnjadi 1px, kalo salah mohon koreksi, dan semoga bisa menyelesaikan permasalahannya :)
Jawaban Terpilih
soalnya agan kasih rule width: 15% untuk buttonnya. jadi ketika ukuran screen mengecil ukuran button juga ikut mengecil, padahal content yg ada didalamnya butuh space lebih dari 15%. dan satu hal lagi
#find-me-on-instagram {
margin-left : 34%;
}
sebisa mungkin hindari penggunaan % pada margin, karena ga mungkin bisa sesuai untuk semua screen size. biasanya hanya bagus di screen agan sendiri.
solusinya dari masalah agan ada beberapa hal yg mesti dirubah.
- hilangkan margin-left pada #instagram dan #facebook, ganti width: 15% dengan min-width: 15%
#find-me-on-instagram, #find-me-on-facebook {
display : inline-block;
border : 5px solid #fff;
border-radius : 10px;
min-width : 15%;
text-align : center;
text-decoration : none;
}
- dua button instagram dan facebook mesti di taruh di block sendiri supaya bisa center, disini saya umpamakan dengan penambahan div "button-block"
<h1 id="find-me-on">Find me on :</h1>
<div id="button-block">
<h2 id="find-me-on-instagram"><a href="http://www.instagram.com/kammalz">Instagram</a></h2>
<h2 id="find-me-on-facebook"><a href="https://www.facebook.com/profile.php?id=100010956046050">Facebook</a></h2>
</div>
- tambah rule di css untuk "button-block"
#button-block {
text-align: center;
}
@gunalirezqimauludi, @rachmatsasongko makasih gan udh bantu jawab. alhamdulillah permasalahan saya selesai, akhirnya saya bisa tidur dengan nyenyak :v