Remove White Space Ionic 3

Question

I’m trying to remove this blank space from my project.

I’d like to keep it that way:

 <ion-content no-padding>
<div [ngSwitch]="Menu" >
<ion-list *ngSwitchCase="'Todosgastronomia'" >
    <ion-item  *ngFor="let produto of produtos" no-padding>
        <ion-thumbnail item-start no-padding>

        <img src="assets/imgs/mmsszjm.png" class="imgproduto">

        </ion-thumbnail>


        <h3 class="nomproduto"> {{produto.nom_produto}}  </h3>

        <h3 class="nomsubcategoria">{{produto.nom_subcategoria}} </h3>

        <h3 class="descproduto"> {{produto.desc_produto}}  </h3>

        <h3 class="valproduto">
           <font  color="#179c90">R$</font> {{produto.val_produto}}
        </h3>

        <button ion-button class="queroproduto">QUERO!</button>
      </ion-item>
    </ion-list>

I can almost leave it a little bit the same, but when I add a button, even though it’s on the right side >> "WANT button!" it occupies a blank space on the other side. If anyone can help, Thank you!

Answer 1

If what you need is that the "I want" button is not below the text, I have two suggestions:

1- Include item-end on the button:

<button ion-button item-end class="queroproduto">QUERO!</button>

2 - Leave the button on the same tag as the price and align to the right:

In the . html file:

<h3 class="valproduto">
    <font  color="#179c90">R$</font> {{produto.val_produto}}
    <button ion-button class="queroproduto">QUERO!</button>
</h3>

In the file . scss:

.queroproduto{
    position: absolute;
    right: 0px;
}