How to adjust the ionic popover position responsively

page1.html

<ion-icon name="more" click()="goToPopOver($event)"></ion-icon> 

page1.ts

//all imports are made // all instances are created goToPopOver(event){ let popover = this.popCtrl.create(PopOverPage, {}, {cssClass: 'popover-custom'}); popover.present({ ev: event; }) } 

app.scss

 .custom-popover .popover-content { width: 60%; bottom: 20px; height: 20%; top: 90px; // is not working } 

popoverpage.html

<ion-content> <div> <div>ABCD</div> <div>pQRS</div> </div> </ion-content> 

I want to adjust the pop over at the end of the page as displayed in the diagram.

Note: I tried changing the left property but it adjusted according to the present width, when I increase the width the pop over position is not as per given requirements.

My popover is displaying on above the ion-icons

Required ->