Labels: Teruggedraaid Bewerking via mobiel Bewerking via mobiele website |
|
| (6 tussenliggende versies door dezelfde gebruiker niet weergegeven) |
| Regel 1: |
Regel 1: |
| /* Algemeen: basis layout fixen */
| | @media screen and (max-width: 768px) { |
| body {
| | .tile-halves { |
| font-size: 16px;
| |
| padding: 10px;
| |
| margin: 0;
| |
| background-color: #ffffff;
| |
| }
| |
| | |
| /* Header styling */
| |
| #content h1.firstHeading {
| |
| font-size: 1.5rem;
| |
| text-align: center;
| |
| padding: 10px 0;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| /* Navigatie-menu optimaliseren */
| |
| #mw-panel {
| |
| display: none; /* Verberg sidebar op mobiel */
| |
| }
| |
| | |
| #mw-head {
| |
| display: none; /* Verberg bovenste menu */
| |
| }
| |
| | |
| /* Content container optimaliseren */
| |
| #content {
| |
| padding: 0 10px;
| |
| max-width: 100%;
| |
| }
| |
| | |
| /* Tabellen responsief maken */
| |
| table {
| |
| width: 100% !important;
| |
| overflow-x: auto;
| |
| display: block;
| |
| }
| |
| | |
| /* Afbeeldingen passend maken */
| |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* Footer aanpassen */
| |
| #footer {
| |
| font-size: 0.8rem;
| |
| text-align: center;
| |
| padding: 10px 0;
| |
| }
| |
| | |
| /* Maak tekst op de hoofdpagina overzichtelijker */
| |
| .mainpage-box {
| |
| margin-bottom: 1rem;
| |
| padding: 10px;
| |
| background: #f8f8f8;
| |
| border-radius: 8px;
| |
| font-size: 0.95rem;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| | |
| /* Zorg ervoor dat kolommen op mobiel onder elkaar worden weergegeven */
| |
| @media (max-width: 768px) { | |
| .mainpage-boxes { | |
| display: flex; | | display: flex; |
| flex-direction: column; | | flex-direction: column !important; /* Stapel de blokken onder elkaar */ |
| gap: 20px; /* Ruimte tussen de blokken */ | | gap: 20px; |
| } | | } |
|
| |
|
| .mainpage-boxes > * { | | .tile-halves > * { |
| width: 100%; | | width: 100% !important; /* Laat elk blok de volle breedte gebruiken */ |
| | box-sizing: border-box; |
| } | | } |
| } | | } |
@media screen and (max-width: 768px) {
.tile-halves {
display: flex;
flex-direction: column !important; /* Stapel de blokken onder elkaar */
gap: 20px;
}
.tile-halves > * {
width: 100% !important; /* Laat elk blok de volle breedte gebruiken */
box-sizing: border-box;
}
}
