I have to make a responsive website using ionic3-angular and I am stuck with positioning things and making them responsive.i have to develop something like this
but i stuck making in this .
this is my code and i didn’t apply any CSS for that thing.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ion-header>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button fill="none">
<ion-icon id="chat" src="assets/custom/chat.svg">
</ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button fill="none">
<ion-icon id="logoW" src="assets/custom/logo-W.svg" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title></ion-title>
<ion-grid>
<ion-row>
<ion-col size-sm="7"offset-sm="4" size-md="6" offset-md="3">
<img style="max-height:auto " src="../assets/img/gami2.png" />
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<div id="slides1">
<ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)" [options]="sliderConfig" loop="true">
<ion-slide>
<img style="max-height:auto " src="../assets/img/1.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/2.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/3.png" />
</ion-slide>
<ion-slide>
<img style="max-height:auto" src="../assets/img/4.png" />
</ion-slide>
</ion-slides>
</div>
</ion-col>
</ion-row >
</ion-grid>
<!--- <ion-searchbar *ngIf="isShown" showCancelButton="true" (ionCancel)="isShown=false" searchIcon> </ion-searchbar>
<ion-buttons >
<button ion-button icon-only *ngIf="!isShown" (click)="isShown=true">
<ion-icon id="search"name="search">
</ion-icon>
</button>
</ion-buttons> -->
<ion-grid>
<ion-row>
<ion-col col-3>
<div class="box">
<div class="container-2">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" />
</div>
</div>
</ion-col>
<ion-segment [(ngModel)]="status">
<ion-col col-3>
<ion-segment-button color="primary" value="on">
<ion-label>Ongoing</ion-label>
</ion-segment-button>
</ion-col>
<ion-col col-3>
<ion-segment-button value="up">
<ion-label>Upcoming</ion-label>
</ion-segment-button>
</ion-col>
</ion-segment>
<ion-icon id="filter" name="switch"></ion-icon>
</ion-row>
</ion-grid>
<div [ngSwitch]="status" >
<ion-grid *ngSwitchCase="'on'">
<ion-row>
<ion-col>
<ion-card *ngFor="let user of users">
<ion-icon name="close" class="close"></ion-icon>
<ion-icon src="assets/upcoimg/mark.svg"></ion-icon>
<ion-card-content>
<ion-card-title id="title"text-center >{{user}}</ion-card-title>
<ion-button color="danger" id="optin" >Opt-in</ion-button>
<ion-icon name="eye" id="views"></ion-icon>
</ion-card-content>
<ion-card-footer> <ion-icon src="assets/upcoimg/insta.svg" id="insta" ></ion-icon></ion-card-footer>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button color="dark">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
<ion-fab-button color="dark">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="logo-instagram">Youtube</ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
```this is my code and i didnt apply any css for that thing.