I am facing an issue with the layout when using ion-slides
. I am using this HTML code to create a simple card:
<ion-header>
<ion-navbar>
<ion-title style="text-align:center;">Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="tutorial-page">
<ion-card>
<ion-card-content>
<ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;">
Title
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-content>
Which rightfully results in this: Correct display of card
But when I try to embed this card in ion-slides
the width is strange. It looks fine on landscape and looks like it has some fixed width. I cant figure out how to make it work in Portrait. Code here:
<ion-header>
<ion-navbar>
<ion-title style="text-align:center;">Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="tutorial-page">
<ion-slides>
<ion-slide>
<ion-card>
<ion-card-content>
<ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;">
Title
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
Result looks like this: Strange width
CSS here:
.tutorial-page {
.toolbar-background {
background: #fff;
border-color: transparent;
}
.slide-zoom {
width: 100%;
height: 100%;
}
.slide-title {
margin-top: 2.8rem;
}
.slide-image {
max-height: 50%;
max-width: 60%;
margin: 18px 0;
}
b {
font-weight: 500;
}
p {
padding: 0 40px;
font-size: 14px;
line-height: 1.5;
color: #60646B;
b {
color: #000000;
}
}
}
Appreciate any help I can get, Andre
Found the solution myself...
I had some snippet in some css file:
.swiper-container {
width: 600px;
height: 300px;
}
Being a beginner in Ionic, I thought the css files are separated from each page. So I had this piece of code lying around on some other page which apparently affected it. Also making changes to css files didn't always live-reload the UI.