Hi sorry for beginner question, I am new in programming and ionic. I have problem with padding.
I want have some slider image like this:
But with my code this is i got:
I want the text and image in red box get up like in first image. I have trying using padding-top and using css in ionic but doesn’t work
Here is my code:
<ion-view view-title="Example">
<ion-content class="padding">
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" auto-play="true" does-continue="true">
<ion-slide>
<h3>Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
<span class="row">
<img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px;">
<div class="col col-50" style="; padding-top:-10px">
<h4 class="row">Image One </h4>
<div class="row">
<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
<h4 class="col col-60" style="padding-top:-10px"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
</div>
</ion-slide>
<ion-slide>
<h3>Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
<span class="row">
<img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px;">
<div class="col col-50" style="; padding-top:-10px">
<h4 class="row">Image Two </h4>
<div class="row">
<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
</div>
</ion-slide>
<ion-slide>
<h3>Favourite</h3>
<div class="row">
<div class="ion-ios-arrow-back col col-5" style="padding-top:50px;"/></div>
<span class="row">
<img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px;">
<div class="col col-50" style="; padding-top:-10px">
<h4 class="row">Image Three </h4>
<div class="row">
<img src="img/star.jpg" style="width:50px; height:50px; padding-top:-10px"class="col col-40">
<h4 class="col col-60"> 5.0</h4>
</div>
</div>
</span>
<div class="ion-ios-arrow-forward col-5" style="padding-top:50px;"/></div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
Also i have try using this but doesn’t work
<div class="row row-up">
.row-up{
padding:-10px; }
}
Thanks…