0

I have this pen here, and when it hits it media query (max-width: 475px) the button in the banner is supposed to drop below the text and center itself in the banner. My issue is that the button begins on the right side above the media query, and then needs to drop and center. I have looked here, here and this stackoverflow, as well as this one, and this one, as well as this stack and this one, but to no avail.

If someone could please jump on my codepen at < 425px and help me figure out whats missing, that would be great.

Here is the code dump

<!DOCTYPE html>
<html>
<head>
  <base href="https://s3.ca-central-1.amazonaws.com/whatever/index.esm.js"/>
  <style>
      * {
 box-sizing: border-box;
}

#banner-container {
          padding: 32px;
          border-radius: 12px;
          background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
          display: flex;
          flex-direction: row;
          height: 152px;
          position: relative;
  width: 100%;
      }

    
   

      #button-container {
          position: absolute;
          right: 32px;
          transform: translateY(-50%);
          top: 50%;
      }
      #cta-button {
          width: 192px;
          height: 60px;
          padding: 16px 23px 16px 21px;
          border-radius: 30px;
          background-color: #16a55a;
          cursor: pointer;
          border: none;
      }
      #cta-button:hover {
          box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
      }
      #cta-button:active {
          background-color: #05823f;
      }
      #cta-button span {
          font-family: Lato, sans-serif;
          font-size: 20px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.4;
          letter-spacing: normal;
          text-align: center;
          color: #ffffff;
      }
    @media screen and (max-width: 475px) {
      #banner-container {
        height: 200px;
      }
      #button-container {
        margin-top: 20px !important;
        transform: translateX(-50%);
        left: 50%;
      }
      #cta-button {
        margin: 0 auto;
      }
      #text-container {
        margin: 0 auto;
      }
    }
      #top-text {
          font-family: Lato, sans-serif;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.43;
          letter-spacing: normal;
          color: #3c4142;
      }
      #main-text {
          font-family: Lato, sans-serif;
          font-size: 24px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.33;
          letter-spacing: normal;
          color: #404040;
      }
      #bottom-text {
          font-family: Lato, sans-serif;
          font-size: 14px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.43;
          letter-spacing: normal;
          color: #3c4142;
      }
      #text-container {

      }
      #text-container span {
          line-height: 20px;
          display: flex;
          flex-direction: column;
      }
      #text-container span:nth-child(2), #text-container span:nth-child(3) {
          margin-top: 8px;
      }
  </style>
</head>
<body>

<div id="banner-container">
  <div id="text-container">
    <span id="top-text">Partner exclusive webinar</span>
    <span id="main-text">Be a sales beast</span>
    <span id="bottom-text">May 4 | 1 pm EST</span>
  </div>
  <div id="button-container">
    <button id="cta-button">
      <span>Register now</span>
    </button>
  </div>
</div>

</body>
</html>
IWI
  • 1,528
  • 4
  • 27
  • 47
  • Why use ```absolute``` and not flex properties, such as: ```justify-content: space-between;```, ```align-items: center;``` and ```flex-wrap: wrap;``` on the parent? And then apply 100% width for small screen and add ```text-align: center;```? – prettyInPink May 19 '21 at 13:24
  • As this example: https://jsfiddle.net/564ohs2r/ – prettyInPink May 19 '21 at 13:28

1 Answers1

1

Rule of thumb: if you can avoid Absolute positioning, Do so.

There's no need for Absolute positioning here, Simple flex layout can achieve what you want

Old:

#button-container {
    position: absolute;
    right: 32px;
    transform: translateY(-50%);
    top: 50%;
}

New:

#button-container {
    align-self: center;
    margin-left: auto;
}

Gives the same effect

align-self: center; centers Vertically

margin-left: auto; consumes all the space between the left side of the button and the right side of the first sibling More on this

And when the media hits

@media screen and (max-width: 475px) {
    #banner-container {
        height: 200px;
        flex-direction: column; /* Drop the button down */
    }

    #button-container {
        margin: 0 auto; /* to center */
    }
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#banner-container {
    padding: 32px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
    display: flex;
    flex-direction: row;
    height: 152px;
    position: relative;
    width: 100%;
}

#button-container {
    align-self: center;
    margin-left: auto;
}

#cta-button {
    width: 192px;
    height: 60px;
    padding: 16px 23px 16px 21px;
    border-radius: 30px;
    background-color: #16a55a;
    cursor: pointer;
    border: none;
}

#cta-button:hover {
    box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}

#cta-button:active {
    background-color: #05823f;
}

#cta-button span {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

@media screen and (max-width: 475px) {
    #banner-container {
        height: 200px;
        flex-direction: column;
    }

    #button-container {
        margin: 0 auto;
    }

    #cta-button {
        margin: 0 auto;
    }

    #text-container {
        margin: 0 auto;
    }
}

#top-text {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #3c4142;
}

#main-text {
    font-family: Lato, sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #404040;
}

#bottom-text {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #3c4142;
}

#text-container {
}

#text-container span {
    line-height: 20px;
    display: flex;
    flex-direction: column;
}

#text-container span:nth-child(2), #text-container span:nth-child(3) {
    margin-top: 8px;
}
<div id="banner-container">
  <div id="text-container">
    <span id="top-text">Partner exclusive webinar</span>
    <span id="main-text">Be a sales beast</span>
    <span id="bottom-text">May 4 | 1 pm EST</span>
  </div>
  <div id="button-container">
    <button id="cta-button">
      <span>Register now</span>
    </button>
  </div>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28