Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana cara agar tulisannya responsive?
maaf sebelumnya saya pemula, ini bagaimna cara fixnya ya? ada org bilang pakai media query atau yg lain. mohon bantuannya.. klo mau fix bisa kontribusi github mungkin..
gambar 1, di desktop tampilannya sudah benar :
gambar 2, ketika disize dgn ukuran mobile tulisan dgn gambar hancur, tidak responsive :
7 Jawaban:
coba foto dan tulisan nya di masukan ke dalam div yang berbeda . Biasanya ukuran layar lebar pakai "col-lg-12" sehingga kalau foto dan tulisan nya di pisahkan dan di masukkan kedalam div berukuran kecil agar bisa tersusun sesuai ukuran layar seperti berikut,
<div class="col-md-4">
<img src="namaGambar.jpg" alt="gambarku" width="" height="">
</div>
<div class="col-md-4">
Hi, nama saya
<h1> Kadek Nusa</h1>
Saya seorang Pelajar
</div>
atau di test juga dengan 'col-md-6' atau juga 'col-lg-8' sesuai kebutuhan layar yang di targetkan
@VikSintus masih tetep gan, tulisannya masih hancur, dan sya juga lgi baca" mengenai Grid System.. masih stuck disini saya
ada yg salah mungkin dari kode saya?
<section class="header">
<div class="container">
<div class="row">
<div class="left-header col-sm-4">
<img src="img/kadeknusa.jpg" alt="Kadek Nusa" class="img-circle">
</div>
<div class="right-header col-sm-4">
<h2>Hai, Nama Saya</h2>
<h1><span>KADEK NUSA</span></h1>
<h3>Saya seorang pelajar</h3>
</div>
</div>
</div>
</section>
sudah saya coba ubah ke md, lg, dan ubah valuenya tetap hancur..
coba div nya di bagi ke dalam 2 'row'. saya test yang ini tak pecah, di coba saja
<section class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/kadeknusa.jpg" alt="Kadek Nusa" class="img-circle">
</div>
<div class="row">
<div class="col-md-4">
<h2>Hai, Nama Saya</h2>
<h1><span>KADEK NUSA</span></h1>
<h3>Saya seorang pelajar</h3>
</div>
</div>
</div>
</section>
@VikSintus sudah ketemu, sya ilangin float di css, itu penyebabnya.. tapi agan tau gk caranya biar tulisannya gk terlalu deket sama batas antara header sama about..
ini gambarnya, klo di resize ke versi mobile, tulisannya terlalu deket cara fixnya gmn ya?
ini kode cssnya :
/* ----Bagian Header---- */
.header img {
width: 300px;
/*border: 3px solid #666*/
}
.header {
background: linear-gradient(to top right, #cf9bff 25%, #c39bff, #b79bff, #ab9bff, #9f9bff 100%);
min-height: 650px;
padding-top: 125px;
}
.left-header {
width: 30%;
margin: 0;
}
.right-header {
padding-top: 80px;
width: 70%;
}
.right-header h2 {
font-size: 35px;
margin: 0;
}
.right-header h1 {
font-size: 65px;
font-weight: bold;
margin: 0;
}
.right-header h3 {
font-size: 25px;
margin: 0;
}
kalau mau dekat coba ubah padding-top di .right-header menjadi 10px atau menurut kemauan tapi kalau mau jauh coba 150px. Dan menurut saya lebih baik left-header dan right-header di pisahkan dalam row yang berbeda karena design yang sekarang sangat bagus di HP dan layar komputer yang besar tapi masih akan pecah di tablet atau layar yang berukuran sedang tapi kalau di pisahkan pada 2 row maka design ini akan cocok di semua layar.
atau tetap pakai design yang sekarang tapi ubah ukuran kolom left-header dan right-header menjadi col-md-6
iya bro, urusan responsive mah, serahin ke bootstrap aja
coba gan kalo g bisa lapor
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="img/kadeknusa.jpg" alt="Kadek Nusa" class="img-circle img-responsive">
</div>
<div class="col-md-4">
<h2>Hai, Nama Saya</h2>
<h1><span>KADEK NUSA</span></h1>
<h3>Saya seorang pelajar</h3>
</div>
</div>
</div>