|
|
| (2 tussenliggende versies door dezelfde gebruiker niet weergegeven) |
| Regel 1: |
Regel 1: |
| /* Algemeen: basis layout fixen */
| |
| body {
| |
| 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;
| |
| }
| |
|
| |
| @media screen and (max-width: 768px) { | | @media screen and (max-width: 768px) { |
| /* Zorg ervoor dat alle directe kinderen van #content onder elkaar staan */ | | .tile-halves { |
| #content > * {
| | display: flex; |
| display: block !important; | | flex-direction: column !important; /* Stapel de blokken onder elkaar */ |
| width: 100% !important; | | gap: 20px; |
| box-sizing: border-box; | |
| margin-bottom: 20px;
| |
| } | | } |
|
| |
|
| /* Maak afbeeldingen responsief */ | | .tile-halves > * { |
| #content img {
| | width: 100% !important; /* Laat elk blok de volle breedte gebruiken */ |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* Pas tekstgrootte aan voor betere leesbaarheid */
| |
| #content {
| |
| font-size: 16px;
| |
| line-height: 1.5;
| |
| padding: 10px;
| |
| }
| |
| }
| |
| | |
| @media screen and (max-width: 768px) {
| |
| /* Zorg ervoor dat alle directe kinderen van #content onder elkaar staan */
| |
| #content > * {
| |
| display: block !important;
| |
| width: 100% !important; | |
| box-sizing: border-box; | | box-sizing: border-box; |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| /* Maak afbeeldingen responsief */
| |
| #content img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* Pas tekstgrootte aan voor betere leesbaarheid */
| |
| #content {
| |
| font-size: 16px;
| |
| line-height: 1.5;
| |
| padding: 10px;
| |
| } | | } |
| } | | } |
@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;
}
}
