skip to Main Content

Hello I need some help trying add another row on top of these four in the picture

like a table but not using a table.
I’m pretty new to html so I don’t know how to put them on top, since when I add a new div, it goes besides it rather than on top of it.

Edit: Someone said I should put a picture of what I want to happen so here it is sizes are off but you get the picture

body {
  background-color: #61162d;
  margin: 0px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button-container {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(25% - 20px);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 15px;
}

@media only screen and (max-width: 681px) {
  .button-container {
    display: inline-block;
    width: 80%;
    height: 90%;
  }
  .button-box {
    display: inline-block;
    width: 80%;
  }
  .btn {
    display: inline-block;
    width: 80%;
  }
}

.button-box:hover {
  transform: translateY(-5px);
}

.button-box h2 {
  margin-bottom: 10px;
}

.button-box .btn {
  background-color: #b5a36a;
  border: 2px solid #b5a36a;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 16px;
  margin: 5px 0;
  /* Adjust this value for vertical spacing between buttons */
  transition: background-color 0.3s, color 0.3s;
}

.button-box .btn:hover {
  background-color: #fff;
  color: #b5a36a;
}

.logos-container {
  display: flex;
  width: 80%;
}
<div class="button-container">
  <div class="button-box">
    <h2>Title 1</h2>
    <a href="#" class="btn">Button 1A</a>
    <a href="#" class="btn">Button 1B</a>
  </div>
  <div class="button-box">
    <h2>Title 2</h2>
    <a href="#" class="btn">Button 2A</a>
    <a href="#" class="btn">Button 2B</a>
  </div>
  <div class="button-box">
    <h2>Title 3</h2>
    <a href="#" class="btn">Button 3A</a>
    <a href="#" class="btn">Button 3B</a>
  </div>
  <div class="button-box">
    <h2>Title 4</h2>
    <a href="#" class="btn">Button 4A</a>
    <a href="#" class="btn">Button 4B</a>
  </div>
</div>

I’m not familiar with divs, so I using display flex, z index, moving the divs into another div but nothing seemed to have worked. It still just put them side by side.

3

Answers


  1. Since you are using display:flex; in the body it will always try to put it side by side.
    You shouldn’t use display:flex; in the body

    Login or Signup to reply.
  2. I assume you need to keep those buttons in the center of the viewport always so maintaining that I created a wrapper in the html and added the following CSS changes:

    body{
        background-color: #61162d;
        margin: 0;
        padding: 0;
    }
    
    /* It's position needs to be absolute to allow those buttons to remain in the center */
    .new-row{
        color: white;
        text-align: center;
        position: absolute;
        /* you may need to adjust this top value according to the content you put inside of it */
        top: calc(50vh - 193px);
        left: 0;
        right: 0;
    }
    
    /* changing the container position to static for the smaller screen */
    @media screen and (max-width: 681px){
        .new-row{
            position: static;
        }
    }
    
    .wrapper {
        background-color: #61162d;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    body{
        background-color: #61162d;
        margin: 0;
        padding: 0;
    }
    
    /* It's position needs to be absolute to allow those buttons to remain in the center */
    .new-row{
        color: white;
        text-align: center;
        position: absolute;
        /* you may need to adjust this top value according to the content you put inside of it */
        top: calc(50vh - 193px);
        left: 0;
        right: 0;
    }
    
    /* changing the container position to static for the smaller screen */
    @media screen and (max-width: 681px){
        .new-row{
            position: static;
        }
    }
    
    .wrapper {
        background-color: #61162d;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .button-container {
        display: flex;
        justify-content: space-between;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .button-box {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        width: calc(25% - 20px);
        transition: transform 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 15px;
    }
    
    @media only screen and (max-width: 681px) {
        .button-container {
            display: inline-block;
            width: 80%;
            height: 90%;
        }
        .button-box {
            display: inline-block;
            width: 80%;
        }
        .btn {
            display: inline-block;
            width: 80%;
        }
    }
    
    .button-box:hover {
        transform: translateY(-5px);
    }
    
    .button-box h2 {
        margin-bottom: 10px;
    }
    
    .button-box .btn {
        background-color: #b5a36a;
        border: 2px solid #b5a36a;
        color: #fff;
        border-radius: 6px;
        text-decoration: none;
        padding: 8px 16px;
        margin: 5px 0;
        /* Adjust this value for vertical spacing between buttons */
        transition: background-color 0.3s, color 0.3s;
    }
    
    .button-box .btn:hover {
        background-color: #fff;
        color: #b5a36a;
    }
    
    .logos-container {
        display: flex;
        width: 80%;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
        <!-- outside the wrapper container -->
        <div class="new-row">I am a new row and above the button-container row</div>
        
        <div class="wrapper">
            <div class="button-container">            
                <div class="button-box">
                <h2>Title 1</h2>
                <a href="#" class="btn">Button 1A</a>
                <a href="#" class="btn">Button 1B</a>
                </div>
                <div class="button-box">
                <h2>Title 2</h2>
                <a href="#" class="btn">Button 2A</a>
                <a href="#" class="btn">Button 2B</a>
                </div>
                <div class="button-box">
                <h2>Title 3</h2>
                <a href="#" class="btn">Button 3A</a>
                <a href="#" class="btn">Button 3B</a>
                </div>
                <div class="button-box">
                <h2>Title 4</h2>
                <a href="#" class="btn">Button 4A</a>
                <a href="#" class="btn">Button 4B</a>
                </div>
            </div>
        </div>
    </body>
    </html>
    Login or Signup to reply.
  3. You can try the following code:

      * {
        box-sizing: border-box;
      }
    
      body {
        background-color: #61162d;
        margin: 0px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    
      .button-container {
        display: flex;
        justify-content: space-between;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    
      .logo-box {
        padding: 20px;
        flex-direction: column;
        display: flex;
      }
    
      .button-box {
        width: 100%;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        transition: transform 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0 0 0;
      }
    
      @media only screen and (max-width: 681px) {
        .button-container {
          display: inline-block;
          width: 80%;
          height: 90%;
        }
        .button-box {
          display: inline-block;
          width: 80%;
        }
        .btn {
          display: inline-block;
          width: 80%;
        }
      }
    
      .button-box:hover {
        transform: translateY(-5px);
      }
    
      .button-box h2 {
        margin-bottom: 10px;
      }
    
      .button-box .btn {
        background-color: #b5a36a;
        border: 2px solid #b5a36a;
        color: #fff;
        border-radius: 6px;
        text-decoration: none;
        padding: 8px 16px;
        margin: 5px 0;
        /* Adjust this value for vertical spacing between buttons */
        transition: background-color 0.3s, color 0.3s;
      }
    
      .button-box .btn:hover {
        background-color: #fff;
        color: #b5a36a;
      }
    
      .logos-container {
        display: flex;
        width: 80%;
      }
    <div class="button-container">
        <div class="logo-box">
            Your logo
            <div class="button-box">
                <h2>Title 1</h2>
                <a href="#" class="btn">Button 1A</a>
                <a href="#" class="btn">Button 1B</a>
            </div>
        </div>
        <div class="logo-box">
            Your logo
            <div class="button-box">
                <h2>Title 2</h2>
                <a href="#" class="btn">Button 2A</a>
                <a href="#" class="btn">Button 2B</a>
            </div>
        </div>
        <div class="logo-box">
            Your logo
            <div class="button-box">
                <h2>Title 3</h2>
                <a href="#" class="btn">Button 3A</a>
                <a href="#" class="btn">Button 3B</a>
            </div>
        </div>
        <div class="logo-box">
            Your logo
            <div class="button-box">
                <h2>Title 4</h2>
                <a href="#" class="btn">Button 4A</a>
                <a href="#" class="btn">Button 4B</a>
            </div>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search