Responsive design for landing page content

This commit is contained in:
halworsen 2018-02-13 17:23:21 +01:00
parent f2a14f3791
commit 87c6523f35
2 changed files with 25 additions and 2 deletions

View File

@ -59,6 +59,7 @@ img.float-right {
.calendar-events { .calendar-events {
padding: 0; padding: 0;
margin-bottom: 1.5em;
list-style: none; list-style: none;
} }
@ -106,7 +107,7 @@ img.float-right {
border-left: 0; border-left: 0;
} }
@media(max-width: 600px){ @media screen and (max-width: 50rem) {
.essentials { .essentials {
flex-direction: column; flex-direction: column;
} }
@ -114,4 +115,27 @@ img.float-right {
.essentials a { .essentials a {
margin: .2em 0; margin: .2em 0;
} }
}
@media screen and (max-width: 65rem) {
.contentsplit {
display: block;
}
.gridr {
height: auto;
padding: 0;
margin-left: 0;
margin-bottom: 3em;
}
.gridr br {
margin: 0;
height: 0px;
}
.gridl {
margin-top: 0;
padding: 0;
}
} }

View File

@ -92,7 +92,6 @@ $motd = $motdfetcher->getMOTD();
</ul> </ul>
<?php } ?> <?php } ?>
</div> </div>
<br>
<p><a class="btn" href="kalender/">Flere aktiviteter</a></p> <p><a class="btn" href="kalender/">Flere aktiviteter</a></p>
</div> </div>