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

Aggressive mobile CSS: force responsive on inline-styled elements

Browse Source
This commit is contained in:
Jarvis Prime
2026-03-24 04:54:36 +00:00
parent 06082dd599
commit 82813f2a5d
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouts/Base.astro
View File

@@ -436,11 +436,22 @@ const isHome = currentPath === '/';
.sides .left, .sides .right { width: 100% !important; float: none !important; margin: 0 !important; } .sides .left, .sides .right { width: 100% !important; float: none !important; margin: 0 !important; }
.subscription-lists-ct { width: 100% !important; } .subscription-lists-ct { width: 100% !important; }
.featured-item { width: 100% !important; } .featured-item { width: 100% !important; }
/* Fix fixed-width elements */ /* Force ALL fixed-width elements to be responsive */
div[style*="width"] { max-width: 100% !important; } [style*="width"], [width] { max-width: 100% !important; }
div[style*="width"] { width: 100% !important; }
table[width], td[width], th[width] { width: auto !important; max-width: 100% !important; }
/* Fix inline images with width attributes */
img[width] { width: auto !important; max-width: 100% !important; height: auto !important; }
/* Headings */
h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }
h2 u, h3 u { text-decoration: none; border-bottom: 2px solid #bb983b; }
/* Buttons */ /* Buttons */
.buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; } .buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; }
a.image-link { display: block; margin: 5px 0; } a.image-link { display: block; margin: 5px 0; }
/* Fix screenshot images */
.screenshot, .screenshot img { max-width: 100% !important; height: auto !important; }
/* Compatibility logos */
.compatibility img { max-width: 80px !important; height: auto !important; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
h1 { font-size: 1.4em; } h1 { font-size: 1.4em; }