diff --git a/src/components/EditorControls.js b/src/components/EditorControls.js
index 0862a73..7c2feb5 100644
--- a/src/components/EditorControls.js
+++ b/src/components/EditorControls.js
@@ -76,7 +76,7 @@ export default function EditorControls({ code, setCode, language, setLanguage, t
-
+
)
@@ -97,6 +97,12 @@ const Header = styled.header`
const Section = styled.div`
display: flex;
align-items: center;
+
+ @media (max-width: 470px) {
+ .optional {
+ display: none;
+ }
+ }
`;
function langaugeToContentType(language) {
diff --git a/src/components/EditorTextArea.js b/src/components/EditorTextArea.js
index 31607ac..17b2ee2 100644
--- a/src/components/EditorTextArea.js
+++ b/src/components/EditorTextArea.js
@@ -19,7 +19,7 @@ export default function EditorTextArea({ code, setCode, language, fontSize }) {
value={code}
onValueChange={setCode}
highlight={highlightWithLineNumbers}
- placeholder={'Type some code...'}
+ placeholder={'Paste (or type) some code...'}
padding={10}
size={fontSize}
textareaId='code-area'
diff --git a/src/components/Menu.js b/src/components/Menu.js
index e3223f5..5f06ca4 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -13,6 +13,12 @@ export const Button = styled.div`
:hover {
background: ${props => props.theme.highlight};
}
+
+ @media (max-width: 640px) {
+ span {
+ display: none;
+ }
+ }
`;
const Menu = styled.ul`
@@ -57,7 +63,7 @@ export const MenuButton = ({ label, ids, value, setValue }) => {
return (