'Grid | Mobile Optimization

I am trying to replicate this style of grid Desktop Version. I was able to replicate this desktop version above, but What I also need is to create an optimized mobile version. Once the dimensions get to about tablet size it appears as so Tablet size about 1269x874 and then mobile version appears as so mobile size about 750x874. The difference between mobile and tablet is the location of the button. Anyway, what I cannot figure out is how to optimize this and make my code appear as the same. All help is appreciated and thank you in advance.

PS: I also cant figure out how to center my button in its designated square.

PSS: The sizing references was obtained from F12 console

EDIT: I have updated the code to show the media query I have tried

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <style media="screen">
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      text-align: left;
      color: white;
      font-size: 14px;
      font-family: Open Sans, sans-serif;
    }

    .grid>div {
      background: #a100ff;
      padding: 1em;
    }

    .grid>div:nth-child(odd) {
      background: #ff00c3;
    }
    .button {
      border: none;
      color: white;
      padding: 16px 50px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 12px;
      position: center;
    }


    .button2 {
      background-color: white;
      color: black;
      border: 2px solid #008CBA;
      position: absolute;
    }

    .button2:hover {
      background-color: #008CBA;
      color: white;
    }

  @media only screen and (max-width: 1279px) {
    grid{
      display: grid;
      grid-template-columns: repeat(3, 2fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
      text-align: left;
      color: white;
      font-size: 14px;
      font-family: Open Sans, sans-serif;
    }
  }

  </style>


</head>

<body>
  <div class="grid">
    <!-- CLASS NUMBER READ LEFT TO RIGHT -->
    <div class="1">
      <p class="quote">"Lingerie is not about seducing men;
        It's about embracing womanhood"<br><br> - Dita Von Teese </p>

    </div>

    <div class="2">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="3">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="4">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="5">
      <button class="button button2"><a href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a></button>
    </div>

    <div class="6">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="7">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="8">
      <p>Image goes here, delete this text</p>
      <img src="" alt="">
    </div>

    <div class="9">
      <p>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the
        only subscription that gets unwrapped TWICE!"<br><br> Wendy S.</p>
    </div>

  </div>



</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Grid | Mobile Optimization

Sources

Related Questions