# Ionic 4 ion-slide width is wrong

**URL:** <https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417>\
**Category:** Ionic Framework\
**Created:** [October 12, 2018, 2:47pm UTC](https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417 "2018-10-12T14:47:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![frontend-raiden](https://avatars.discourse-cdn.com/v4/letter/f/f19dbf/32.png) [@frontend-raiden](https://forum.ionicframework.com/u/frontend-raiden)\
**Post date:** [October 12, 2018, 2:47pm UTC](https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417/1 "2018-10-12T14:47:34Z")

</div>

Hi!

I don’t know if this is a bug or I’m doing something wrong, but the size of the slide on a 360px screen sets to more then 2000 px. What could be the problem?

The content is not even this long if it’s in one row. In case of short slide content, the slide is shorter then the screen. It won’t set to full width, eventhough it’s only supposed to show one at a time.

Thank you!

(this is full new, empty project)

Ionic:

ionic (Ionic CLI) : 4.2.1  
Ionic Framework : @ionic/angular 4.0.0-beta.12  
@angular-devkit/build-angular : 0.7.5  
@angular-devkit/schematics : 0.7.5  
@angular/cli : 6.1.5  
@ionic/angular-toolkit : 1.0.0

Cordova:

cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)  
Cordova Platforms : not available  
Cordova Plugins : not available

System:

NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)  
npm : 6.4.1  
OS : Windows 10

home.page.html:

```auto
<ion-slides pager="false" [options]="sliderOptions">

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-1.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-2.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-3.png" alt=""/>
      </div>
     <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-4.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

</ion-slides>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button color="light">
    <ion-icon name="arrow-round-forward"></ion-icon>
  </ion-fab-button>
</ion-fab>

```

home.page.scss:

```auto
ion-slides {
	height: 100% !important;
	background: var(--ion-color-primary);
	color: #fff;

	ion-slide { 
		align-items: start;
		text-align: center;

		.slide-content {
			padding: 30px 10%;

			.image-wrap {
				width: 80%;
				margin: 0 auto;

				img {
					width: 100%;
				}
			}

			.text p {
				margin-top: 0;
				margin-bottom: 10px;
			}
		}
	}
}

ion-fab-button {
	--box-shadow: 0 0 0 transparent;

	ion-icon {
		color: var(--ion-color-primary);
	}
}

```

---

<div class="post-metadata">

**Author:** ![pivalig](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/pivalig/32/100053_2.png) [@pivalig](https://forum.ionicframework.com/u/pivalig)\
**Post date:** [April 9, 2019, 7:09pm UTC](https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417/2 "2019-04-09T19:09:59Z")

</div>

ion-slide \>:first-child {  
width: 100%;  
}

---

<div class="post-metadata">

**Author:** ![danielzen](https://avatars.discourse-cdn.com/v4/letter/d/96bed5/32.png) [@danielzen](https://forum.ionicframework.com/u/danielzen)\
**Post date:** [August 18, 2020, 7:17pm UTC](https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417/3 "2020-08-18T19:17:59Z")

</div>

I’m using Ionic 5, and a PortalOutlet inside which I’m instantiating a Component which uses ion-slides & ion-slide. I’m experiencing the same problem, except my slides are being set to over 15000px! (I am on a ultra-wide monitor, wondering if their is a correlation).

Anyway, I wound up adding:

```auto
ion-slide {
  width: 100% !important;
}

.swiper-wrapper {
  width: min-content !important;
}

```

to my css for the component. But it would appear that their is some corner case bug here…

---

<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, 8:54pm UTC](https://forum.ionicframework.com/t/ionic-4-ion-slide-width-is-wrong/144417/4 "2021-07-19T20:54:13Z")

</div>

Closed on July 19, 2021, 8:54pm UTC