Mathijs/lermer.nl
Mathijs/lermer.nl
2
1
Fork 0
Code Issues 2 Pull requests Activity

Mobiel footer fix

Browse source
This commit is contained in:
Mathijs Lermer 2023-04-20 13:14:30 +02:00
parent 22ba3bbccb
commit 5377c88ba3
2 changed files with 96 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
assets/css/mrl.css
View file

@ -339,6 +339,7 @@
} }
/*footer**links*/ /*footer**links*/
@media {
.footer-links-l{ .footer-links-l{
max-width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
@ -381,9 +382,56 @@
.footer-links-l ul li a:active { .footer-links-l ul li a:active {
color: #8d100e; color: #8d100e;
} }
}
/*footer**links*klein*/
@media (max-width: 450px) {
.footer-links-l{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-radius: 5px;
}
.footer-links-l ul {
padding: 0px;
display: inline-block
}
.footer-links-l ul li {
display: inline-block;
padding: 15px 10px 15px 10px;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-l ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-l ul li a {
text-decoration: none;
color: #D2E0F0;
}
.footer-links-l ul li a:hover {
text-decoration: none;
border-radius: 5px;
color: #D2E0F0;
}
.footer-links-l ul li a:active {
color: #8d100e;
}
}
/*footer**rechts*/ /*footer**rechts*/
@media {
.footer-links-r{ .footer-links-r{
max-width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
@ -425,8 +473,54 @@
.footer-links-r ul li a:active { .footer-links-r ul li a:active {
color: #8d100e; color: #8d100e;
}
} }
/*footer**rechts*small*/
@media (max-width: 450px) {
.footer-links-r{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
border-radius: 5px;
}
.footer-links-r ul {
padding: 0px;
display: inline-block
}
.footer-links-r ul li {
display: inline-block;
padding: 15px 10px 15px 10px;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-r ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-r ul li a {
text-decoration: none;
color: #D2E0F0;
}
.footer-links-r ul li a:hover {
text-decoration: none;
border-radius: 5px;
color: #D2E0F0;
}
.footer-links-r ul li a:active {
color: #8d100e;
}
}
/*footer**bar*/ /*footer**bar*/
.footer-links-bar{ .footer-links-bar{

4
index.html
View file

@ -68,11 +68,11 @@
<div id="tekst-midden"> <div id="tekst-midden">
<h1>Welkom</h1> <h1>Welkom</h1>
<p>Hallo en welkom op mijn website, u kunt hier onder andere mijn<a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf"> CV </a>bekijken.<br> <p>Hallo een welkom op mijn website, u kunt hier onder andere mijn<a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf"> CV </a>bekijken.<br>
</p></br> </p></br>
<picture> <picture>
<source media="(max-width: 850px)" srcset="/assets/afb/don-t-panic-klein.webp" width="278" height="165"> <source media="(max-width: 850px)" srcset="/assets/afb/don-t-panic-klein.webp" alt="Don't panic" width="278" height="165">
<img src="/assets/afb/don-t-panic.webp" alt="Don't panic" width="550" height="330"> <img src="/assets/afb/don-t-panic.webp" alt="Don't panic" width="550" height="330">
</picture> </picture>
</div> </div>