I've been struggling with getting the flexbox to fill as I want it to when the code is executed. I'm also looking to make it more responsive to size changes. Despite searching for answers in various resources, I still can't figure out why it's not working. That's why I've turned to this site, which has been helpful to me in the past for other projects.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}/* Header */
.column, .columna, .columnab, .columnb {
align-items: center;
text-align: center;
border: solid;
border-width: thin;
max-height: 20em;
}
.column {
flex: 33%;
}
.columna {
width: 100%;
}
.columnab {
width: 22%;
}
.columnb {
width: 17%;
}
.row {
min-height: 10em;
display: flex;
flex-wrap: wrap;
background-color: #FF9176;
}
/* Navigation Section */
.dropbtn {
background-color: #FF9176;
color: #0061A0;
font-size: 75%;
font-family: 'Solway', serif;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #FEB384;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
width: 100%;
position: absolute;
background-color: #FEB384;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #FECE9D;}
.show {display: block;}<header>
<div class="row">
<div class="column" style="padding: 0">
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 1</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 2</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 3</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</div>
<div class="columna">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">GROUP 4</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</div>
</div>
<div class="column">
<h6> LOGO </h6>
<a href="index.html"><img src="images/print_studio_logo.***" alt="Print Studio's Logo"></a>
</div>
<div class="column" style="padding: 0">
<div class="columna" style="height: 50%;">
<h6> INSERT CART / LOGIN </h6>
</div>
<div class="columna" style="height: 50%;">
<h6> INSERT SOCIAL </h6>
</div>
</div>
</div>
</header>