# Slides size change according to orientation in ionic

**URL:** <https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703>\
**Category:** ionic-v3\
**Created:** [May 17, 2018, 6:32am UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703 "2018-05-17T06:32:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hasnainsakir001](https://avatars.discourse-cdn.com/v4/letter/h/a6a055/32.png) [@hasnainsakir001](https://forum.ionicframework.com/u/hasnainsakir001)\
**Post date:** [May 17, 2018, 6:32am UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703/1 "2018-05-17T06:32:08Z")

</div>

I have a problem here. i have used 3slides in an ionic app when i load it my ipad pro emulator .when i rotate the screen or change the orientation .the last slide out this three automaticaly corrects the size of slideview in to one with out any prob it displays .but the other two slides doesnt change its size .the codes used for all three are same

---

<div class="post-metadata">

**Author:** ![JAR19](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jar19/32/113216_2.png) [@JAR19](https://forum.ionicframework.com/u/JAR19)\
**Post date:** [May 17, 2018, 8:01am UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703/2 "2018-05-17T08:01:20Z")

</div>

Keep it simple have two slides components and use

> ion-slides showWhen=“portrait”  
> ion-slides showWhen=“landscape”

That way can apply different css styles and layouts to each.

---

<div class="post-metadata">

**Author:** ![hasnainsakir001](https://avatars.discourse-cdn.com/v4/letter/h/a6a055/32.png) [@hasnainsakir001](https://forum.ionicframework.com/u/hasnainsakir001)\
**Post date:** [May 17, 2018, 9:07am UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703/3 "2018-05-17T09:07:15Z")

</div>

can u give me a sample

---

<div class="post-metadata">

**Author:** ![JAR19](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jar19/32/113216_2.png) [@JAR19](https://forum.ionicframework.com/u/JAR19)\
**Post date:** [May 17, 2018, 9:19am UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703/4 "2018-05-17T09:19:49Z")

</div>

> [@hasnainsakir001](#):
>
> can u give me a sample

```auto
<ion-slides showWhen=“portrait” class="mycssprotrait">
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:35pm UTC](https://forum.ionicframework.com/t/slides-size-change-according-to-orientation-in-ionic/130703/5 "2021-07-19T21:35:23Z")

</div>

Closed on July 19, 2021, 9:35pm UTC