how to get icon on the next line

October 12, 2022

I am trying to place the phone icon right below the facebook icon but i"m unable to understand how to do it. I tried using div but the icon is going out of the media-div inside of footer. If someone can please let me know how to do it. Below is my html and css.

  footer {
    height: 300px;
    box-sizing: border-box;
    border: 1px solid black;
    margin-top: 3%;
    padding: 25px;
  }
  .media {
    width: 400px;
    height: 80%;
    box-sizing: border-box;
    border: 1px solid black;
  }
  .media h1 {
    font-size: 20px;
  }
  .media img {
    margin: 65px;
    margin-left: 0;
    margin-top: 3%;
  }
  .select-sign select {
    width: 230px;
  }
  .select-submit select {
    width: 100px;
    color: white;
    background-color: #117CC0;
  }

<footer>
        <div class="media">
          <h1>STAY CONNECTED</h1>
          <div class="select-div" style="display: flex;gap:20px">
            <div class="select-sign"> 
          <select>
            <option value="sign-up" label="Sign up for emails"></option>
          </select>
          </div>
          <div class="select-submit"> 
            <select>
              <option value="submit" label="SUBMIT"></option>
            </select>
            </div>
          </div>

          <div class="img">
    <!------------------facebook icon------->
            <img src="./images/facebook.png">
    <!------------------twitter------------->
            <img src="./images/twitter.png">
    <!------------------youtube------------->
            <img src="./images/youtube.png">
            </div>
    <!------------------phone-icon------------->
            <div>
            <img src="./images/phoneIcon.png" alt=" ">
            </div>
            </div>
          </footer>

>Solution :

There are too many margins in .media img. Try this:

  footer {
    height: 300px;
    box-sizing: border-box;
    border: 1px solid black;
    margin-top: 3%;
    padding: 25px;
  }
  .media {
    width: 400px;
    height: 80%;
    box-sizing: border-box;
    border: 1px solid black;
  }
  .media h1 {
    font-size: 20px;
  }
  .media img {
    margin: 3% 65px 0 0;
  }
  .select-sign select {
    width: 230px;
  }
  .select-submit select {
    width: 100px;
    color: white;
    background-color: #117CC0;
  }

<footer>
        <div class="media">
          <h1>STAY CONNECTED</h1>
          <div class="select-div" style="display: flex;gap:20px">
            <div class="select-sign"> 
          <select>
            <option value="sign-up" label="Sign up for emails"></option>
          </select>
          </div>
          <div class="select-submit"> 
            <select>
              <option value="submit" label="SUBMIT"></option>
            </select>
            </div>
          </div>

          <div class="img">
    <!------------------facebook icon------->
            <img src="./images/facebook.png">
    <!------------------twitter------------->
            <img src="./images/twitter.png">
    <!------------------youtube------------->
            <img src="./images/youtube.png">
            </div>
    <!------------------phone-icon------------->
            <div>
            <img src="./images/phoneIcon.png" alt=" ">
            </div>
            </div>
          </footer>