Sizing of my application is not responsive

Hi guys, I am creating an application. However, I realise the sizing of my components are either too small for ipad/ ipad pro or too large for iphone. Do I have to retrieve the gadget data to customise perfectly to fit on all devices? Please help. Thank you in advance. Much apperication.

You can add this to any component which you want to take full width on any device.

style="width: 100%;"

if this doesn’t work add this to any component, selector or div containing it:

style="padding: 0;"

Thankyou for the reply. However, the content is either too big in small devices or too small for large device. Which causes some of my content (e.g. ion-card) floating around.

or you can try to organize all of your contents using <ion-grid> to put them in a specific row & place on your screen.

<ion-grid>
  <ion-row>
    <ion-col col-3> </ion-col> 
   <ion-col col-3></ion-col>
 <ion-col col-3> </ion-col> 
  <ion-col col-3></ion-col>
  </ion-row>
 </ion-grid>

Yes I have placed all my content into column of 12

Then I think the content’s width should be set to 100% within the column.
That will make the content fill the column which it belongs to.

1 Like

Appreciated your help. Will try it now thankyou.

1 Like

No problem.
Make sure your content is not set to ‘float’ or position absolute.

But if I need an ion-card stack over a picture shouldn’t I use absolute? Am really new to CSS.

Yes, then all of these ion card stacks should be within the same ion-col column.