MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Aturan CSS | /* | ||
* Aturan CSS ini diterapkan ke semua skin dan perangkat. | |||
* Media queries digunakan untuk menyesuaikan tampilan di layar mobile. | |||
* Tempatkan kode ini di bagian bawah file MediaWiki:Common.css Anda. | |||
*/ | |||
@media all and (max-width: 768px) { | @media all and (max-width: 768px) { | ||
/* Sembunyikan sidebar di mobile */ | /* Sembunyikan sidebar navigasi di perangkat mobile */ | ||
#mw-navigation { | #mw-navigation { | ||
display: none; | display: none; | ||
} | } | ||
/* Lebarkan konten utama */ | /* Lebarkan area konten utama untuk mengisi seluruh lebar layar mobile */ | ||
#content { | #content { | ||
margin-left: 0 !important; | margin-left: 0 !important; /* !important diperlukan untuk menimpa aturan default MediaWiki */ | ||
} | } | ||
/* Sesuaikan ukuran font untuk | /* Sesuaikan ukuran font dasar untuk keterbacaan yang lebih baik di mobile */ | ||
body { | body { | ||
font-size: 16px; | font-size: 16px; | ||
} | } | ||
/* Pastikan gambar tidak meluap */ | /* Pastikan gambar tidak meluap dari kontainer dan tetap proporsional */ | ||
img { | img { | ||
max-width: 100%; | max-width: 100%; | ||
| Line 22: | Line 27: | ||
} | } | ||
/* Buat tabel | /* Buat tabel bisa di-scroll secara horizontal jika terlalu lebar di mobile */ | ||
table { | table { | ||
display: block; | display: block; /* Mengubah tabel menjadi elemen blok */ | ||
overflow-x: auto; | overflow-x: auto; /* Mengaktifkan scrolling horizontal jika kontennya melebihi */ | ||
white-space: nowrap; | white-space: nowrap; /* Mencegah teks dalam sel tabel pecah baris */ | ||
} | } | ||
/* === Perbaikan spesifik skin tertentu (jika diperlukan) === */ | |||
/* | |||
* Jika Anda menggunakan skin seperti Vector atau Monobook, | |||
* mungkin ada elemen lain yang perlu disesuaikan. | |||
* Contoh: | |||
* #mw-head { width: 100%; } | |||
* #mw-panel { display: none; } | |||
*/ | |||
} | } | ||