thomasna82 thomasna82 - 6 months ago 14
HTML Question

Need help getting column stacked links to flex into a row

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

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>

Comments