I have a button and a link aligned in a column using flexbox. I am trying to adjust the layout so that both the link and the button are displayed on a single row when the max-width is set to 800px. Despite my efforts, I have been unable to find a solution that meets my specific needs. I hope someone can provide assistance, as it seems like a simple fix but I cannot seem to solve it myself.
Below is my CSS & HTML:
.landing {
position: relative;
}
#pic {
display: flex;
}
#pic figcaption {
position: absolute;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 7vw;
z-index: 1;
top: 30%;
left: 50%;
transform: translateX(-50%);
color: #ffff66;
}
@media (max-width: 800px) {
.buttonWrapper {
display: flex;
flex-direction: row;
}
}
/*****Signup button*****/
.home-signup {
position: absolute;
font-size: 2.5vw;
border: 2px solid #ffff66;
border-radius: 10px;
color: #ffff66;
padding: 0.5em 2.5em;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
cursor: pointer;
}
/****login button****/
.home-login {
position: absolute;
font-size: 1.8em;
color: #ffff66;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}<section class="landing">
<figure id="pic">
<img srcset="images/detail/landingBig.jpg 1920w,
images/detail/landingMedium.jpg 960w,
images/detail/landingSmall.jpg 480w" sizes="100vw" src="images/detail/landingMedium.jpg" alt="Top Banner with pic of two speakers on a wooden floor">
<figcaption>Collabo</figcaption>
</figure>
<div class="buttonWrapper">
<button class="home-signup">Signup</button>
<a class="home-login" href="#">Login</a>
</div>
</section>