Need help getting column stacked links to flex into a row - html

Question

I have a button and a link aligned to column with flexbox. I want to change just the link and button to fit onto one row at max-width: 800px; I have searched for and found no answer that fits exactly what I need. Hope someone can help and it is probably an easy fix but I can't seem to figure it out.
Here 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>

Answer 1

I would do a reset on a few rules and write or load mediaqueries last:
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
.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;
}
/*****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;
}
#media (max-width: 800px) {
.buttonWrapper {
display: flex;
border: solid;
flex-direction: row;
left: 0;
width: 100%;
justify-content: center;
position: absolute;
top: 60%;
}
.home-signup,
.home-login {
transform: scale(1);
margin: 1em;
position: static;
}
}
<section class="landing">
<figure id="pic">
<img src="http://lorempixel.com/800/600" 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>