andrie/student-web-if-development-kit
1
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity

mobile layout

Browse Source
This commit is contained in:
cw
2026-06-04 20:24:16 +07:00
parent 5e59063642
commit 3a6763cd43
3 changed files with 304 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/ACAAB/index.html
+93 -4
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
@@ -1215,17 +1215,106 @@
</div>
</div>
<!-- Responsive: 2-column on desktop -->
<!-- Responsive: 2-column on desktop, hide image on small mobile -->
<style>
@media (min-width:1024px) {
/* Hero: 2 kolom di tablet+ */
@media (min-width:640px) {
.lg-hero-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (min-width:1024px) {
#acaab-hero-img-wrap img {
max-width: 420px !important;
}
}
/* Stats chips: stack vertikal di mobile kecil */
@media (max-width:479px) {
#acaab-stats > div > div:first-child {
flex-direction: column;
gap: 0.375rem;
}
#acaab-stats > div > div:first-child > div {
flex: none !important;
width: 100%;
}
#acaab-stats > div > div:last-child {
gap: 0;
}
}
/* Project section header: stack di mobile kecil */
@media (max-width:560px) {
#acaab-proj-section > div > div:first-child {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
}
/* Achievement section padding di mobile */
@media (max-width:639px) {
#acaab-ach-section {
padding-top: 1.75rem !important;
padding-bottom: 2rem !important;
}
#acaab-proj-section {
padding-top: 1.75rem !important;
padding-bottom: 2rem !important;
}
}
/* Modal: bottom-sheet full-width di mobile */
@media (max-width:639px) {
.acaab-modal-backdrop {
padding: 0 !important;
align-items: flex-end !important;
}
.acaab-modal-backdrop > div {
max-width: 100% !important;
width: 100% !important;
max-height: 90vh !important;
border-radius: 1rem 1rem 0 0 !important;
}
}
/* Pagination: full-width di mobile */
@media (max-width:479px) {
#acaab-ach-more, #acaab-ach-less {
width: 100%;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Pagination container: stack vertikal */
#acaab-ach-section > div:last-child {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
}
/* Filter dropdown: full-width di mobile */
@media (max-width:479px) {
#acaab-ach-filters div[style*="flex:1"],
#acaab-proj-filters div[style*="flex:1"],
#acaab-ach-filters select,
#acaab-proj-filters select {
flex: 1 1 100% !important;
min-width: 0 !important;
}
#acaab-ach-filters > div:last-child,
#acaab-proj-filters > div:last-child {
flex-direction: column;
}
}
/* Scroll hint: lebih kecil di mobile */
@media (max-width:479px) {
#acaab-proj-section p[style*="text-align:center"] {
display: none;
}
}
</style>
</section>