我正在try 向我的网站添加页脚.我使用了四列布局:linked here.当我try 添加调整大小时,它不起作用.我try 将其从影响宽度改为 colored颜色 ,这很有效,因此我知道识别屏幕大小或任何具有错误类/id名称的内容都没有问题.
.footer {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
background-color: #1F363D;
text-align: center;
color: white;
}
.footer-column {
float: left;
width: 20%;
height: 100%;
}
@media screen and (max-width: 600px) {
.footer-column {
width: 100%;
}
}
.footer a:link {
color: white;
font-size: 12px;
}
.footer a:visited {
color: white;
}
.footer a:hover {
color: white;
}
.footer a:active {
color: white;
}
<div class="footer">
<div style="width:100%; display: flex; justify-content: space-evenly; align-text: center; font-size: 13px;">
<div class="footer-column">
<p style="font-size: 15px;">Pages</p>
<a href="/index.html">Home</a><br>
<a href="/projects.html">Projects</a><br>
<a href="/contact.html">Contact</a><br>
<a href="/about.html">About</a>
</div>
<div class="footer-column">
<p>Projects</p>
<a href="/projects/mastermind.html">Mastermind</a><br>
<a href="/projects/simon.html">Simon</a><br>
<a href="/projects/trivia.html">Trivia</a><br>
</div>
<div class="footer-column">
<p>Column 3</p>
</div>
<div class="footer-column">
<p>Column 4</p>
</div>
</div>
<p style="color: white; text-align: center; font-family: monospace;">© 2022 Jake Poyer</p>
</div>