Question 43519 in Html Question posted in
Some basic documentation can be found here.

Why are this two divs one next to each other, does someone know why this footer is not working? – Html

My intention is to display the logo and underneath of it, 3 buttons with all of the social media links. However, I don’t know why, it makes my 2 divs display inline instead of flex or block. Does somebody know why is this not working?

.foot {
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>

I’ve tried changing the display method, using bootstrap rows and even <br>.

Tags:

2

Answers


  1. 0

    By default, a flex-box will try to squeeze its items into a single row. To change this, you need flex-direction: column:

    .foot {
  flex-direction: column;
}

    Try it:

    .foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>
    Login or Signup to reply.
  2. 0

    if you want to use flex, you need to specify the direction of the items. Flex comes with different directions:

    row | row-reverse | column | column-reverse;

    Since you want to display them on top of each other, just add this to your foot class:

    flex-direction: column;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search