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

Ionic Framework
1

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):

image
image1575×321 21.6 KB

Any help would be greatly appreciated! Thank you!

2

User ion-grid and create single row with 2 columns and give size to columns as per your needs and place your buttons there.

Refer below snippet for the code reference.

 <IonGrid>
      <IonRow>
        <IonCol size="6">Yes</IonCol>
        <IonCol size="6">No</IonCol>
</IonRow>
</IonGrid>
3

Thank you for the reply. While using ion columns did allow for easier separation of my two buttons, I believe that the issue I had with the left and right margins being misaligned has to do with the ion-card, itself, as I believe the text is shifted slightly to the left as well. So this issue with the right margin being smaller than the left still remains, but this might just be because of the way the ion-card is designed. Here is an image of my buttons after using columns:

image
image1597×372 22.4 KB

Here is also my new code for my questions.page.scss:

.yes {
    width: 100%;
    font-weight: bold;
}

.no {
    width: 100%;
    font-weight: bold;
}

.card {
    margin-top: 3%;
    margin-right: 3%;
    margin-left: 3%;
}

as well as my new code for my questions.page.html:

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

<ion-content>

  <ion-card id="card" class="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-grid>
      <ion-row>
        <ion-col>
          <ion-button  class="yes" id="yes" (click)="red()">YES</ion-button>
        </ion-col>
        <ion-col>
          <ion-button class="no" id="no" (click)="green()">NO</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

</ion-content>

Thank you!