Reducing columns spacing

Ionic Framework
1

Hi

I am trying to reduce the spacing between the columns in this rows so that all their columns are centred, with less spacing

col

This is my code:

<ion-row>
        <ion-col class="gaugerangetext_col" >
          <ion-item class="gaugerangetext_col_low"></ion-item>
           <ion-text class="gaugerangetext">Good 0-30</ion-text>  
        </ion-col>
        <ion-col class="gaugerangetext_col">
          <ion-item class="gaugerangetext_col_medium"></ion-item>
           <ion-text class="gaugerangetext">Moderate 30-60</ion-text>
        </ion-col>
        <ion-col class="gaugerangetext_col"  >
          <ion-item class="gaugerangetext_col_high"></ion-item>
           <ion-text class="gaugerangetext">Bad 60-90</ion-text> 
        </ion-col>        
      </ion-row>
.gaugerangetext {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  color: #108684;
  display: inline-block;
  margin: 0 auto;
  position: relative; /* Declared position allows for location changes */
  top: -150px; /* Moves the image 2px closer to the top of the page */
  //left: 10px;
}
.gaugerangetext_col {
  text-align: center;

}

.gaugerangetext_col_low {
  width: 20px;
  height: 10px;
  --background: #0c8eca;///change
  margin: 0 auto;
  // left: -40px;
  // top: -135px;
}

.gaugerangetext_col_medium {
  width: 20px;
  height: 10px;
  --background: #eeb333;
  margin: 0 auto;
//   left: -65px;
//   top: -135px;
 }

.gaugerangetext_col_high {
  width: 20px;
  height: 10px;
  --background: #f0250a;
  margin: 0 auto;
  // left: -52px;
  // top: -135px;
}

What do I need to change to reduce the spacing?

2

You can use the class ion-no-padding on your ion-grid tag.

3

Similar to bootstrap, ion-col has a size convention that you can use to increase or reduce width automatically depending on your requirements.

You need to imagine that there are 12 columns and size them up accordingly. Example:

<ion-grid>
  <ion-row>
    <ion-col size="2" >
       Small
    </ion-col>
    <ion-col size="3.5" >
       Medium
    </ion-col>
    <ion-col size="6.5" >
       Large
    </ion-col>
  </ion-row>
</ion-grid>

In your case the sizes are automatically set to “4” because it will automatically set based on 3 columns (12 divide by 3 is 4). Therefore, that is why the spaces are very big in between.

Reducing the spacing between columns can be adjusted based on the sizes. In your case, you might want to set the sizes to 3 in each column. This depends on what you want to achieve.

Hope that helps.