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 :

avatar KadekNusa
@KadekNusa

51 Kontribusi 6 Poin

Diperbarui 5 tahun yang lalu

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

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

@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..

avatar KadekNusa
@KadekNusa

51 Kontribusi 6 Poin

Dipost 5 tahun yang lalu

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>
avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

@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;
}

avatar KadekNusa
@KadekNusa

51 Kontribusi 6 Poin

Dipost 5 tahun yang lalu

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

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

iya bro, urusan responsive mah, serahin ke bootstrap aja

avatar wahidila
@wahidila

9 Kontribusi 2 Poin

Dipost 5 tahun yang lalu

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>

avatar yudono
@yudono

55 Kontribusi 17 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban