How can I line up 2 buttons side-by-side in the center in an ion-card?

Hello, I am trying to make 2 buttons side-by-side at the bottom of my ion-card: a Yes and a No button. However, I cannot figure out how to properly style these two buttons to use up 100% of the width (with margins, of course) while still each taking up equal space in terms of width. I’ve tried to get there in various different configurations, with my most effective being:

questions.page.scss:

.yes {
    display: inline-block;
    width: 48%;
    margin-left: 1.35%;
    font-weight: bold;
}

.no {
    display: inline-block;
    width: 48%;
    font-weight: bold;

}

with .yes being my Yes button styling and .no being my No button styling.

For reference, her is also my questions.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Questionnaire</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card id="card">
    <ion-card-header>
      <ion-card-title>Do you recognize any of these names?</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ul>
        <li>Drivers: Michael Schumacher, Lewis Hamilton, Max Verstappen, Sebastian Vettel</li>
        <li>Team Principals: Jean Todt, Toto Wolff, Christian Horner, Maurizio Arrivabene</li>
      </ul>
    </ion-card-content>

    <ion-button  class="yes" id="yes" (click)="red()">YES</ion-button><ion-button class="no" id="no" (click)="green()">NO
    </ion-button>
  </ion-card>
</ion-content>

Also, here is how my questions page looks like in the Responsive view (just to show you how the right margin is slightly larger than the left margin):

image1575×321 21.6 KB

Any help would be greatly appreciated! Thank you!

1 post - 1 participant

Read full topic