jarvis/componentowl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive CSS for mobile-friendly layout

Browse Source
This commit is contained in:
Jarvis Prime
2026-03-24 04:16:25 +00:00
parent f574bbac6d
commit 0dc2cd7ccc
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/layouts/Base.astro
View File

@@ -387,20 +387,49 @@ const isHome = currentPath === '/';
/* === RESPONSIVE HELPERS === */ /* === RESPONSIVE HELPERS === */
@media (max-width: 960px) { @media (max-width: 960px) {
.d-placing { width: 95%; } .d-placing { width: 95%; padding: 0 10px; }
.d-menu { flex-wrap: wrap; justify-content: center; gap: 2px; display: flex; list-style: none; } .d-menu { flex-wrap: wrap; justify-content: center; gap: 2px; display: flex; list-style: none; }
.d-menu li { margin: 0; float: none; padding-right: 8px; } .d-menu li { margin: 0; float: none; padding-right: 8px; }
.d-menu .menu-item { font-size: 12px; padding: 4px 6px; } .d-menu .menu-item { font-size: 12px; padding: 4px 6px; }
.d-footer .left, .d-footer .right { float: none; width: 100%; } .d-footer .left, .d-footer .right { float: none; width: 100%; }
.product-content .right { width: 100%; } .product-content .right { width: 100%; float: none; }
.product-content .left { width: 100%; } .product-content .left { width: 100%; float: none; }
.product-content .sides { width: 100%; }
.support-content .left { width: 100%; } .support-content .left { width: 100%; }
.support-content .right { width: 100%; float: none; } .support-content .right { width: 100%; float: none; }
.about-content p { width: 100%; } .about-content p { width: 100%; }
.hp-wrap iframe { float: none; margin: 15px auto; display: block; } .about-content .libor { width: 100%; margin: 20px 0; }
.hp-wrap iframe { float: none; margin: 15px auto; display: block; max-width: 100%; }
.buttons-hp-vertical { float: none; margin: 15px auto; } .buttons-hp-vertical { float: none; margin: 15px auto; }
.home-static .list-l, .home-static .list-r { float: none; width: 100%; } .home-static .list-l, .home-static .list-r { float: none; width: 100%; }
.owl-flag { display: none; } .owl-flag { display: none; }
/* Responsive images */
img { max-width: 100%; height: auto; }
/* Tables */
table { max-width: 100%; overflow-x: auto; display: block; }
/* Pricing tables */
.pricing-table { width: 100%; }
.pricing-table td, .pricing-table th { padding: 6px 8px; font-size: 13px; }
/* Comics grid */
.comics-grid { grid-template-columns: 1fr; }
/* Footer */
.d-footer .latest-posts { height: auto; }
.d-footer .news .news-item { width: 100%; }
/* General text */
.d-content-wrap { word-wrap: break-word; overflow-wrap: break-word; }
/* Sidebar links */
.product-content .right ul { padding-left: 15px; }
}
@media (max-width: 480px) {
.d-header { padding: 10px 5px; }
.d-menu .menu-item { font-size: 11px; padding: 3px 4px; }
.d-menu li { padding-right: 4px; }
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
.d-footer .copy { font-size: 11px; }
.d-footer .social a { font-size: 12px; }
.buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; }
} }
</style> </style>
</head> </head>