ionic3 - ionic 3 angular slide height just enough to hold contents -


my page looks http://moblize.it

and trying change slide height enough contents. cannot fix else screw on smaller devices

the current code looks like

 <ion-slides direction="vertical" speed="1000" slidesperview="1">   <ion-slide  class="site-slide"  style="background-color:#2298d3">     <ion-card style="height:300px;float:center">       <img src="http://www.segalpetroniru.com/images/consulting-services-hero-image-secondary.jpg" />     </ion-card>   </ion-slide>    <ion-slide padding class="site-slide" >      <ion-row>        <ion-col text-left>          <ion-row><ion-col col-1 style="background-color: #4054b2"></ion-col><ion-col padding style="color:#616161"><h2 style="color:#616161">revolution!</h2>  in field of mobile app development!</ion-col>          </ion-row>        </ion-col>      <ion-col text-left>       <ion-row><ion-col col-1 style="background-color: #4054b2"></ion-col><ion-col padding style="color:#616161">               <h2 style="color:#616161">bots!</h2>               it's time conversational apps. need conversations, need apps, need everything!</ion-col>          </ion-row>      </ion-col>      </ion-row>    </ion-slide>    <ion-slide class="site-slide" style="background-color: #f5f5f5" padding>         <ion-row><ion-col col-1></ion-col><ion-col>         <ion-card padding>         <div style="background-color:#2298d3;color:white;height:50px;font-weight:bold;font-size:large" text-left padding>contact us</div>        <ion-list class="contact-form" padding>             <form [formgroup]="slidetwoform" style="background-color: #d9e4ee">                  <ion-item>                     <ion-label floating>name</ion-label>                     <ion-input formcontrolname="username" type="text"></ion-input>                 </ion-item>                  <ion-item>                     <ion-label floating>company</ion-label>                     <ion-input formcontrolname="company" type="text"></ion-input>                 </ion-item>                   <ion-item>                     <ion-label floating>email</ion-label>                     <ion-input formcontrolname="email" type="email"></ion-input>                 </ion-item>                   <ion-item>                     <ion-label floating>phone</ion-label>                     <ion-input formcontrolname="phone" type="text"></ion-input>                 </ion-item>                  <ion-item>                     <ion-label floating>message</ion-label>                     <ion-textarea formcontrolname="message"></ion-textarea>                 </ion-item>              </form>              <button ion-button full color="site" (click)="sendmessage()" [disabled]="formincomplete() == true">send</button>         </ion-list>              </ion-card>           </ion-col><ion-col col-1></ion-col></ion-row>   </ion-slide>  </ion-slides> 


Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -