Netlify CMS mobile responsive CSS

16 April 2020 #coding, #netlify, #cms, #css ]

So far I’ve been waiting so long for the Netlify CMS to be working on mobile devices so I wrote my own piece of CSS as below. Add it to your Netlify /admin/index.html file and below the closing </body> tag so it can overwrite the netlify-generated css.

Screenshots for your reference:

As note by Chris in the comment, should you need to update the CSS classname, please follow his instruction.

@media (max-width: 799px) {
  .css-u4olba-SidebarContainer-card {
    position: static;
    width: 100%;
    margin-bottom: 30px;
  }
  .css-v758ki-AppMainContainer, .css-12b66la-AppHeaderContent {
    min-width: 0;
  }
  .css-104dqk8-AppHeaderButton-button-buttonActive-buttonActive-buttonActive-buttonActive-AppHeaderButton, .css-12yqrwa-AppHeaderNavLink-AppHeaderButton-button-buttonActive-buttonActive-buttonActive-buttonActive-AppHeaderButton {
    margin: 0;
    padding: 16px 7px;
  }
  .css-1f7nhiq-CollectionMain {
    padding-left: 0;
  }
  .css-1hvrgvd-CollectionTopContainer-card-cardTop {
    width: 100%;
  }
  .css-16b5p1f-ToolbarSectionMain-toolbarSection {
    flex-direction: column;
    justify-content: space-evenly;
  }

  /* Media */
  .css-1f3mf5k-StyledModal {
    padding: 15px;
    grid-template-rows: 190px auto;
  }
  .css-svjxk-SearchContainer {
    display: block;
    width: 100%;
  }
  .css-smzvtl-LibraryTop {
    flex-direction: column;
  }
  .css-3ifd9s-ActionsContainer {
    text-align: center;
  }
  .css-1ih1y1j-LibraryTitle {
    margin-bottom: 15px;
  }
  .css-2ptjc9-UpperActionsContainer {
    display: inline-block;
  }
  .css-1qukh7n-DownloadButton-button-default-disabled-button {
    margin-left: 0;
    margin-right: 0;
  }
  .css-13rmovq-StyledUploadButton-button-default-disabled-button-gray {
    margin-left: 10px;
  }
  .css-1hpjyse-DeleteButton-button-default-disabled-button-lightRed {
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
  }
  .css-1s67tkf-InsertButton-button-default-disabled-button-green {
    margin-top: 10px;
    margin-left: 10px;
  }
  .css-16796rj-LowerActionsContainer {
    display: inline-block;
    margin-top: 0;
  }
  .css-stmjdx-CardGridContainer  {
    position: static;
    overflow: visible;
    width: 100%;
    padding-top: 20px;
  }
  /* End Media */

  /* Blog */
  .css-hn3jn7-EditorContainer {
    min-width: 0;
    padding-top: 100px;
  }
  .css-2oej7z-ToolbarContainer {
    height: 100px;
    width: 100%;
    min-width: 0;
  }
  .css-osnbqe-ToolbarToggle {
    flex-direction: column;
  }
  /* End Blog */
}