Mon, Jan 11, 2021, 1 minutes
A quick workaround on Netlify CMS Dashboard for mobile responsive.
Place the below code after your closing </body>
:
<style>
@media (max-width: 799px) {
.css-1gj57a0-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;
}
.css-e9z4u8-AppHeaderSiteLink {
display: none;
}
/* 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;
}
nav li {
width: 35px;
overflow: hidden;
}
/* End Blog */
}
</style>
Thanks for reading!
See you again in next article.
Si Nguyen