Progressive web apps and ionic cards

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

Ionic cards are not responsive when used for desktop browser or anything larger than a tablet. Ionic cards need to be in a column and a row to align them in the center using offset and width. However, this poses an issue on desktop. The cards lock to the right or left and do not center. Also, cards cannot be in two-columns within the same row when on desktop nor wrap when on smaller screens. If wrap is placed on ion-row it does not work. The cards will resize and keep the padding, jumbling all of the card content.

What behavior are you expecting?

The ionic cards should have a max width on desktop and a utility attribute that allows for perfect centering. The wrap feature of the ion grid should work and the cards should stack and fill the space, not resize to 100px width. These features should work on desktop and mobile.

Steps to reproduce:

1. Add an ion-grid with an ion-row, two ion-columns, and then an ionic card with some content within each column.
2. Do Ionic serve and view on desktop. Cards will align to the left.
3. Now add width-50 and offset-25 to the cards, restart, view in desktop mode, and then finally emulate with chrome to view it on an iphone 4

I found that adding this css to my sass page fixes the problem. 
ion-card{
  max-width: 768px;
}
ion-col{
  flex: 1 0 310px;
}
Also, I had to add an inline style on the card in the left column of margin-left:auto and then on the card in the right column margin-right:auto.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x 2.0.0-beta.11

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local:
Ionic CLI Version: 2.0.0-beta.31 Ionic App Lib Version: 2.0.0-beta.17 ios-deploy version: 1.8.6 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v4.4.5 Xcode version: Xcode 7.3.1 Build version 7D1014

[luchillo17]

Me too @jgw96, i have an app published both to App and Play stores that look awesome, but it’s desktop variant wastes so much space that looks weird, i had to limit width to 1024px to account for tablets.

[cambronjay]

Awesome! I look forward to seeing it in action. @jgw96