如何使用媒体查询设置响应式页脚 | html - CSS

Question

I'm having a footer issue which must be responsive by using media queries.

I would like to make it with a flex method but I can't find a way to get the requested result.

Also, I think the organization of my html could be better.

If you guys could check this out if would appreciate it. Thanks!

Footer

Responsive footer with 940px media query

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { max-width: 1850px; font-family: "BenchNine", sans-serif; font-size: 1.5em; line-height: 1.5; }.flex { display: flex; } img { height: auto; width: 100%; vertical-align: top; } footer { padding: 1em; justify-content: space-around; background-color: #ededed; }.footer-link { color: #000; }.footer-link:hover { color: #999; } @media screen and (max-width: 940px) { }

 <footer class="flex"> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <picture> <img src="/img/logo.png" alt="logo"> </picture> </footer>

Answer 1

For example by using the percentage for the column width.

footer {
  width: 100%;
  padding: 1em;
  /* justify-content: space-around; */
  background-color: #ededed;
}
footer nav, footer picture {
  display: block;
  width: 25%;
}
@media screen and (max-width: 940px) {
  footer nav, footer picture {
    width: 100%;
  }
}

Note that if you want more space for the picture, you can change the width of the columns, for example 3x nav 22%, and the picutre 34%

Answer 2

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { max-width: 1850px; font-family: "BenchNine", sans-serif; font-size: 1.5em; line-height: 1.5; }.flex { display: flex; flex-wrap: wrap; } img { height: auto; width: 100%; vertical-align: top; } footer { padding: 1em; background-color: #ededed; } footer > nav{flex-grow:1}.footer-link { color: #000; min-width: 190px; display: block; }.footer-link:hover { color: #999; } @media screen and (max-width: 940px) { }

 <footer class="flex"> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <ul class="footer-menu"> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> <li><a class="footer-link" href="#">Lorem</a></li> </ul> </nav> <picture> <img src="/img/logo.png" alt="logo"> </picture> </footer>