Skip to content

Instantly share code, notes, and snippets.

@searls
Last active May 24, 2023 09:45
Embed
What would you like to do?
Mobile styling overrides for NetlifyCMS to make it more responsive-ish.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<link href="mobile-overrides.css" rel="stylesheet" />
</body>
</html>
@media (max-width: 799px) {
[class*=BackCollection],
[class*=BackStatus] {
font-size: .6rem;
}
[class*=AppHeaderContent],
[class*=AppMainContainer] {
margin-right: 0;
margin-left: 0;
min-width: calc(100vw - 24px);
max-width: 100vw;
}
[class*=AppHeaderContent] {
display: flex;
justify-content: space-between;
}
[class*=AppHeaderQuickNewButton] {
width: 100%;
}
[class*=AppHeaderButton] {
padding-left: 4px;
padding-right: 4px;
}
[class*=EditorContainer],
[class*=ToolbarContainer] {
min-width: initial;
}
[class*=ToolbarSubSectionFirst] {
display: flex;
flex-direction: column;
}
[class*=PublishedToolbarButton] {
padding: 0 8px;
}
[class*=PublishedToolbarButton]::after {
display: none;
}
[class*=DeleteButton] {
margin-top: 5px;
padding: 0 2px;
}
[class*=ViewControls] {
position: initial;
}
[class*=PreviewPaneContainer-ControlPaneContainer] {
padding: 0;
}
[class*=ControlPaneContainer] {
max-width: 100vw;
}
[class*=EditorControlBar] [class*=ToolbarContainer] {
display: flex;
flex-direction: column;
}
[class*=CollectionContainer] {
display: flex;
flex-direction: column;
}
[class*=SidebarContainer] {
position: initial;
width: initial;
}
[class*=CollectionMain] {
padding-left: 0;
margin-top: 20px;
}
}
@ambrod
Copy link

ambrod commented Apr 20, 2023

great job ! Is this the last version ?

@searls
Copy link
Author

searls commented Apr 20, 2023

@ambrod last one I changed yeah

@simontemplarST
Copy link

Love this it’s working 99% for me. For the life of me I can’t get the buttons in the image management modal to behave, though. I’m very likely missing something as I’m a FORTRAN and COBOL developer haha.
IMG_5671
IMG_5672

@searls
Copy link
Author

searls commented May 19, 2023

I'm very sorry but I never used the image features of this. You might try staticcms, which is a fork of the netlify CMS and is working on adding mobile support

StaticJsCMS/static-cms#16

@danielpietzsch
Copy link

Thanks for sharing this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment