CODEWITHSUNDEEP
gridionic4
sembilanlangit
sembilanlangit

Reputation: 355

show hide column grid ionic if change size device

I have two column in grid ionic with different size :

<ion-row>
  <ion-col size="7">
    <div>
      1 of 2
    </div>
  </ion-col>
  <ion-col size="5">
    <div>
      2 of 2
    </div>
  </ion-col>
</ion-row>

if handphone size show column number two only, if pad's size show two column. how to do that?

Upvotes: 0

Views: 2791

Answers (2)

ACES
ACES

Reputation: 490

If you don't specify the number of the columns it will take whatever is left on the screen. class="ion-hide-sm-up" will hide element that is bigger than mobile device.

<ion-row>
  <ion-col size="7" class="ion-hide-sm-up">
    <div>
      1 of 2
    </div>
  </ion-col>
  <ion-col>
    <div>
      2 of 2
    </div>
  </ion-col>
</ion-row>

Instead of sm in the class you can use md, lg, xl and instead of up you can use down depending on your needs.

Upvotes: 4

EinfachHans
EinfachHans

Reputation: 255

You can use Media Querys: https://www.w3schools.com/css/css_rwd_mediaqueries.asp - like that you can apply styles for device sizes, specified by you.

Upvotes: 1

Related Questions