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
Since you are using
display:flex;
in thebody
it will always try to put it side by side.You shouldn’t use
display:flex;
in thebody
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:
You can try the following code: