How to set a responsive footer using media queries

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!

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 >
    <nav>
      <ul >
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
      </ul>
    </nav>
    <nav>
      <ul >
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
      </ul>
    </nav>
    <ul >
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
    </ul>
    </nav>
    <picture>
      <img src="/img/logo.png" alt="logo">
    </picture>
  </footer>

CodePudding user response：

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%

CodePudding user response：

* {
  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 >
    <nav>
      <ul >
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
      </ul>
    </nav>
    <nav>
      <ul >
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
        <li><a  href="#">Lorem</a></li>
      </ul>
    </nav>
    <ul >
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
      <li><a  href="#">Lorem</a></li>
    </ul>
    </nav>
    <picture>
      <img src="/img/logo.png" alt="logo">
    </picture>
  </footer>