When there is an ion-row responsive-sm
element, and inside are two ion-col
elements with a width-50
, and then inside these columns are multiple ion-card
elements, there is an awkward gap between the last card in the first column and the first card in the second second column. There is too much space. Instead of the spacing that appears between consecutive cards in the same column, an awkward gap shows up.
.card-md + ion-card {
margin-top: 0;
}
For someone trying to design for mobile and tablet devices, using a two-column approach is probably a common scenario, since it is not good for the tablet display to have super-wide columns in one row.
Yet for the mobile view, having the awkward gap is obviously not a good thing.
Is there a common workaround for this, without over-customization of the css?