Footer in app?

Hello,

I have a quick question, do you know how to remove this white bar at the bottom of my application ?

Capture d’écran 2020-08-31 à 12.29.48

Can you share your code ?

Of app.component.html ?

please share of this page html code

the page that gives you the screenshot you shared

2 Likes
<ion-content>
  <div id="container">
      <ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
    <ion-card class="cardWelcome">
      <ion-card-header>
        <ion-card-title>{{ homeMessage.firstMessage }} 👋🏼 </ion-card-title>
      </ion-card-header>

      <ion-card-content>
        {{ homeMessage.textMessage}}
        <br /><br />
        <div class="nextSorties">Prochaines sorties</div>
      </ion-card-content>
    </ion-card>
  </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
      <ion-slides [options]="slideOpts" class="cardProjet" style="text-align: left;">
      <ion-slide *ngFor="let rassosMessageBoucle of listlocal let i=index">
        <a routerLink="/affiche/{{rassosMessageBoucle.id}}" *ngIf="i<5">
        <ion-card class="cardSize" *ngIf="rassosMessageBoucle.isok == '1'">
        <img [src]="rassosMessageBoucle.imgRassos">
          <ion-card-header>
            <ion-card-title style="text-align: center;">{{ rassosMessageBoucle.nameRassos }}</ion-card-title>
            
            <ion-col *ngIf="rassosMessageBoucle.validteam == '1'">
              <ion-badge color="warning" style="font-size: 7px; margin-right: 2px; margin-top: 4vw;"><ion-icon name="lock-closed-outline"></ion-icon> Validé</ion-badge>
              <ion-badge color="success" style="font-size: 7px; margin-top: 4vw;"><ion-icon name="location"></ion-icon> {{ rassosMessageBoucle.villePrincipale }}</ion-badge>
                </ion-col>
                <ion-col *ngIf="rassosMessageBoucle.validteam == '0'">
                  <ion-badge color="medium" style="font-size: 7px; margin-right: 2px;"><ion-icon name="lock-open-outline"></ion-icon> Aucune validation</ion-badge>
                  <ion-badge color="success" style="font-size: 7px;"><ion-icon name="location"></ion-icon> {{ rassosMessageBoucle.villePrincipale }}</ion-badge>    
                </ion-col>
          </ion-card-header>
        
        </ion-card>
        </a>
        
      </ion-slide>
    </ion-slides>
    </ion-col>
    </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-card>
            <img [src]="cityMessage.imgCity" />
            <ion-card-header>
              <ion-card-subtitle>à trottinette</ion-card-subtitle>
              <ion-card-title style="text-transform: uppercase;">Visitez {{ cityMessage.nameCity }}</ion-card-title>
            </ion-card-header>
          
            <ion-card-content>
              {{ cityMessage.descriptionCity }}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      </ion-grid>
    </div>
</ion-content>

Your code is perfect. try to run your application in the browser and find unnecessary white space using inspect element tool

1 Like

I use vscode and i install prettier, is format code and remove blank space

1 Like