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) {
  aside.css-1gj57a0-SidebarContainer-card.el9l68m0 {
    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 */

  /* Optional */
  span.Resizer.vertical {
    display: none;
  }

  .Pane.vertical.Pane2 {
    display: none;
  }

  .Pane.vertical.Pane1 {
    width: 100% !important;
  }

  .css-1bqupl5-ViewControls.e1pxf6c47 {
    display: none;
  }

  .SplitPane.css-7d7n9g-StyledSplitPane-card-splitPane.e1pxf6c41.vertical {
    display: block !important;
  }

  .css-134r1tn-RowContainer.ebn7k121 {
    display: block;
  }

  button.css-6ekon-ActionButton-button-default-disabled-button.eljtsap3 {
    margin: 0 10px 0 0;
    font-size: 12px;
    padding: 0 10px;
  }

  .css-1o58c3b-ButtonsContainer.ebn7k122 {
    text-align: left;
  }

  .css-134r1tn-RowContainer.ebn7k121 {
    margin-top: 10px;
  }

  button.css-196hm3u-DeleteButton-button-default-disabled-button-lightRed.eljtsap1 {
    margin: 0 10px 0 0;
  }

  button.css-d08ild-InsertButton-button-default-disabled-button-green.eljtsap2 {
    margin-left: 0;
  }

  .css-1o58c3b-ButtonsContainer.ebn7k122 {
    margin-top: 10px;
  }

  button.css-579ih7-ActionButton-button-default-disabled-button-gray-ActionButton.eljtsap3 {
    margin: 0 10px 0 0;
    font-size: 12px;
    padding: 0 10px;
  }

  label.nc-fileUploadButton.css-1fb6kv1-UploadButton-button-default-disabled-button-gray.eljtsap0 {
    margin-left: 0;
  }
}