Sizing of my application is not responsive


#1

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.


#2

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;"


#3

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.


#4

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>

#5

Yes I have placed all my content into column of 12


#6

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.


#7

Appreciated your help. Will try it now thankyou.


#8

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


#9

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


#10

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