MediaWiki:Common.css: Difference between revisions
From The Blockheads Wiki
Attempt to improve mobile compatibility
FloofyPlasma (talk | contribs) No edit summary Tag: Reverted |
FloofyPlasma (talk | contribs) (Attempt to improve mobile compatibility) Tag: Reverted |
||
| Line 6: | Line 6: | ||
float: right !important; | float: right !important; | ||
} | } | ||
/* Mobile compatibility for Infoboxes */ | |||
/* Ensure tables are responsive */ | |||
table { | |||
max-width: 100%; | |||
width: 100%; | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
} | |||
table img { | |||
max-width: 100%; /* Ensure images within tables scale */ | |||
height: auto; | |||
} | |||
/* Style the outer table for better appearance on mobile */ | |||
.mobile-friendly-table { | |||
border: 1px solid silver; | |||
background-color: white; | |||
font-size: 90%; | |||
margin: 10px auto; | |||
width: 100%; | |||
max-width: 100%; | |||
padding: 5px; | |||
} | |||
/* Header styling for better visibility on mobile */ | |||
.mobile-friendly-header { | |||
font-size: 110%; | |||
text-align: center; | |||
background-color: #d4e3e5; | |||
padding: 10px; | |||
} | |||
/* Make images responsive and centered */ | |||
.mobile-friendly-image { | |||
background-color: #BCE2E7; | |||
background-image: linear-gradient(to bottom, #aed6e3, #caefec); | |||
max-width: 160px; /* Use max-width instead of fixed width */ | |||
height: auto; | |||
margin: auto; | |||
display: block; | |||
text-align: center; | |||
} | |||
.mobile-friendly-image img { | |||
max-width: 100%; /* Responsive image scaling */ | |||
height: auto; | |||
} | |||
/* Style the icon container */ | |||
.mobile-friendly-icons { | |||
text-align: center; | |||
margin-top: 10px; | |||
} | |||
/* Style icons with proper spacing */ | |||
.mobile-friendly-icons img { | |||
max-width: 40px; | |||
height: auto; | |||
margin: 0 5px; | |||
} | |||
/* Make tables more readable on mobile */ | |||
table th, | |||
table td { | |||
padding: 8px; | |||
text-align: left; | |||
background-color: #d4e3e5; | |||
} | |||
@media (max-width: 600px) { | |||
/* Scale down font size and padding for mobile devices */ | |||
.mobile-friendly-header { | |||
font-size: 100%; | |||
padding: 5px; | |||
} | |||
.mobile-friendly-table { | |||
font-size: 85%; | |||
} | |||
} | |||
.ns-6 .editsection, | .ns-6 .editsection, | ||
