ReactJS Ionic cannot remove padding from Grid Col element

user_2713836 0
Viewed 128

I'm using React-Ionic and I am not able to reduce the top/bottom padding from the Col element of my Grid.
This is the code I'm using

       <IonGrid fixed={true} >
          <IonRow >
            {
              categories.map(l => {
                return (
                  <IonCol key={l.name} size="6" size-md >
                    <IonCard style={{ backgroundColor: '#444' }}>
                      <IonCardHeader >
                        <IonIcon style={{ display: 'flex', fontSize: '30px', marginBottom: 10 }} icon={l.icon} />
                        <IonCardTitle style={{ fontSize: 18 }}>{l.name}</IonCardTitle>
                      </IonCardHeader>
                    </IonCard>
                  </IonCol>
                )
              })
            }
          </IonRow>
        </IonGrid>

and below you can see the result, but I wanted to have vertically closer the cards. I also tried to change the code to 

<IonCard style={{ backgroundColor: '#444', paddingTop:0, paddingBottom:0 }}>

without results.
Thanks for the help.

enter image description here

ionic-framework reactjs
1 Answers

it is a combination of padding and margin, i reduced it to zero so you can adjust accordingly

<IonCol key={l} size="6" size-md  style={{ padding : 0}}>
  <IonCard style={{ backgroundColor: '#444', padding :0 , margin :0 }}>
    <IonCardHeader >
      <IonIcon style={{ display: 'flex', fontSize: '30px', marginBottom: 10 }} icon={homeOutline} />
      <IonCardTitle style={{ fontSize: 18 }}>{l + " THIS IS TITLE"}</IonCardTitle>
    </IonCardHeader>
  </IonCard>
</IonCol>

enter image description here

user_1223130
Related