Ionic app not responsive need help in scss - css

Question

I have done the app which is clone of wouldyourather . i have a problem its working fine on samsung normal size devices . but in bigger screen phone its not responsive if any one can help how ill do this to responsive on every device ?
i know just need to change some css if any one can help ? Thanks
html
<ion-navbar color="grey" center>
<ion-title >Would You Rather ?</ion-title>
<ion-buttons class="bttn" right><button right class="bttn" (click)="presentPrompt()"> <ion-icon color="light" name="md-more"></ion-icon></button></ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="background">
<ion-slides *ngIf="questions" #slides (ionSlideDidChange)="slideChanged()" class="slidee">
<ion-slide *ngFor="let question of questions | async; let i = index;" >
<!-- <div class="orca">
this is for or round
</div> -->
<!-- <h3>Question {{i+1}}</h3> -->
<div class="quizcontainer" >
<div class="upper" text-center (click)="show(question.ckc)" (click)="clickedButton(1,question.would)" >
<p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage1 }}% </p>
<div class="another"><p class="q1" style="text-align: center;">{{question.would}}</p> </div>
</div>
<div class="or" style="color: white" ><p class="pp">OR </p></div>
<div class="down" text-center (click)="show(question.ckc)" (click)="clickedButton(2,question.rather)" >
<p *ngIf="showclicks" style="color: white" item-end class="p1">{{ clickPercentage2 }}% </p>
<div class="another"> <p class="q1" >{{question.rather}}</p></div>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-content>
scss
page-newp {
ion-icon {
font-size: 40px; //Preferred size here
}
.bttn{
background-color: transparent; // <===== For change the icon background color //
}
ion-title {
text-align: center;
font-family: "Comic Sans MS" !important;
font-weight: 650 !important;
}
.upper{ // <==== Red Box / uppwer box class //
position: relative;
background-color: red !important; // <===== For change the red color //
height: 50% !important;
color: white;
justify-content: center;
align-items: center;
}
.background {
background-color: #383838; //<==== For change the Background color //
}
.pp {
text-align: center;
font-family: "Comic Sans MS" !important;
font-weight: 500;
font-size:22px;
}
.or{
margin-top: -15px;
position: relative;
height: 0%;
height: 0.2%;
}
.down{ //<==== Blue Box / lower box class //
position: relative;
margin-top: 33px;
width: 100%;
background-color: blue !important; // <===== For change the blue color //
height: 60% !important;
color: white;
justify-content: center;
align-items: center;
}
.another { //<===== Question postion //
position: absolute;
text-align: center;
width: 100%;
top: 30px;
}
.slidee {
margin-top: -30px !important;
}
.q1{
text-align: center !important;
font-family: Comic Sans MS !important; font-size: 25px !important; text-align: center;
}
.p1{
position: absolute;
margin-left: 300px;
font-family: Comic Sans MS !important;
font-size: 23px !important;
}
ion-item{
background-color: transparent !important;
}
.quizcontainer{
height: 520px;
widhth: 100%;
}
h1{
color: white !important;
}
/* .orca{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
margin-top: 60%;
margin-left: auto;
border-radius: 50%;
} */
}
this is iphonex in web

Answer 1

Use media queries with different device port Size so that it can be render across different screens