Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Making all buttons the same width when buttons are stacked for mobile and when buttons are nested two levels under parent

Using Flexbox, how can I configure the buttons so that they’re all the same width when flex-direction: column is applied for mobile? It would typically be simple, however, the buttons are two levels beneath the parent and I can’t change the HTML markup. Here’s a demo with the HTML and CSS below:

.multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  border: 1px solid red;
  flex: 1;
}

.multi-cta-container a {
  border: 1px solid lime;
  flex: 1;
}
<div class="multi-cta-group">
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">CTA label for video</a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Shop
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Learn more
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Subscribe now
    </a>
  </div>
</div>
Tags:

3

Answers


  1. 0

    It’s hard to know exactly what you want because you mention that this is for "mobile" and I’m not sure if you’re trying to make it reactive. But based on your example, some points:

    1. Setting flex: 1 on .multi-cta-container a doesn’t do anything because the elements are not immediate children of the container.
    2. It is perfectly fine to set width: 100% on your multi-cta-container divs to force them to the width of the container.
    3. The elements within don’t need to worry about flex layout. They can just fill the width of their own containers using display: block
    4. And finally you probably want to center the text labels (?)

    Here’s a snippet with these changes in place. Comment if this is not what you’re after and I’ll revise or delete.

    .multi-cta-group {
  border: 1px solid gray;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  border: 1px solid red;
  flex: 1;
  width: 100%;
}

.multi-cta-container a {
  border: 1px solid lime;
  display: block;
  text-align: center;
}
    <div class="multi-cta-group">
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">CTA label for video</a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Shop
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Learn more
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Subscribe now
    </a>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can add width: 100%; to the parent container: .multi-cta-container

    and add display: block; width: 100%; to .multi-cta-container a so it can stretch same as container width.

    https://codepen.io/talha2k/pen/vEBpwpO

    Login or Signup to reply.
  3. 0

    Here’s some CSS grid code that might work better for your case. You can use media queries of course to switch from display: flex to display: grid for mobile resolutions:

    .multi-cta-group {
  border: 1px solid gray;
  display: grid;
  grid-template-columns: repeat(1, auto);
  justify-content: center;
  gap: 16px;
  margin: 20px;
  padding: 20px;
}

.multi-cta-container {
  outline: 2px solid red;
  text-align: center;
}
.multi-cta-container a {
  outline: 2px solid lime;
}
    <div class="multi-cta-group">
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">CTA label for video</a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Shop
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Learn more
    </a>
  </div>
  <div class="multi-cta-container">
    <a href="#" class="btn btn-primary">Subscribe now
    </a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search