*, *::before, *::after {
  box-sizing: border-box;
}

body, html, #root {
  min-height: 100%;
}

img {
  max-width: 100%;
}

.App {
  width: 100%;
  min-height: 100%;
}

.mdl-grid {
  max-width: 1200px;
}

.mdl-card {
  width: auto;
}

.mdl-cell {
  overflow: hidden;
}

.app-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -14px;
  margin-top: -14px;
}

@media screen and (max-width: 550px) {
  .mdl-cell {
    margin-left: auto;
    margin-right: auto;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, html, #root {
  min-height: 100%;
}

img {
  max-width: 100%;
}

.App {
  width: 100%;
  min-height: 100%;
}

.mdl-grid {
  max-width: 1300px;
}

.mdl-card {
  width: auto;
}

.mdl-cell {
  overflow: hidden;
}

.app-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -14px;
  margin-top: -14px;
}

@media screen and (max-width: 550px) {
  .mdl-cell {
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 479px) {
  .mdl-cell--3-col {
    width: calc(100% - 16px)
  }
}

Increase max width and cell width on Mobile
Increase max width and cell width on Mobile
