I have no idea why I can’t make this responsive. I am attaching the code to see if someone can help me clarify. Thank you so much!
App.tsx
import { useState } from 'react';
import './App.css';
import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
const text=`# Welcome to my React Markdown Previewer!
## This is a sub-heading...
### And here's some other cool stuff:
Heres some code, \`<div></div>\`, between 2 backticks.
\`\`\`
// this is multi-line code:
function anotherExample(firstLine, lastLine) {
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
return multiLineCode;
}
}
\`\`\`
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.
There's also [links](https://www.freecodecamp.com), and
> Block Quotes!
And if you want to get really crazy, even tables:
Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.
- And of course there are lists.
- Some are bulleted.
- With different indentation levels.
- That look like this.
1. And there are numbererd lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:
`;
function App() {
const [markdownText, setMarkdownText] = useState<string>(text);
return (
<>
<div className='body'>
<h1 className='title'>Markdown Previewer</h1>
<div className='boxes-container'></div>
<div className='editorWrap'>
<div className='toolbar'>
<div className='editor'>
<i className='fab fa-free-code-camp'></i>
Editor
<i className='fa fa-arrows-alt'></i>
</div>
</div>
<textarea name='editor' id='editor' value={markdownText} onChange={(e) => setMarkdownText(e.target.value)}></textarea>
</div>
<div id='preview'>
<ReactMarkdown>{markdownText}</ReactMarkdown>
</div>
</div>
</>
)
}
export default App
You are inserting a chunk of HTML (the code you’ve posted there) into some containing HTML structure. What is that HTML structure and what is the CSS you’ve defined for it?
Ah ok, just needed to check if there were any extra rules I couldn’t see.
Anyway, elements with display: flex and without an explicit width are going to size [approximately] to whatever their contents are. So in this case you have a thin column of elements, so the container with display flex is going to be a thin container
Ah it’s not even implicit: I didn’t scroll down the CSS enough, just saw the element with the class .editor, didn’t realise you’d also applied rules to it via the id #editor as well. You have set a width on the container, and it’s 500px, both the editor and the previewer are in that container.
Yes, I know the image doesn’t have css, neither does the previewer, I’m stuck with the editorwrap css and the editor I’m unable to make it responsive, but I’ll end up doing it! xD, once I achieve that goal, it’s to put css on what I’m missing and finish passing the tests.
import { useState } from 'react';
import './App.css';
import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
const text=`# Welcome to my React Markdown Previewer!
## This is a sub-heading...
### And here's some other cool stuff:
Heres some code, \`<div></div>\`, between 2 backticks.
\`\`\`
// this is multi-line code:
function anotherExample(firstLine, lastLine) {
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
return multiLineCode;
}
}
\`\`\`
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.
There's also [links](https://www.freecodecamp.com), and
> Block Quotes!
And if you want to get really crazy, even tables:
Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.
- And of course there are lists.
- Some are bulleted.
- With different indentation levels.
- That look like this.
1. And there are numbererd lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:
`;
function App() {
const [markdownText, setMarkdownText] = useState<string>(text);
return (
<>
<div className='body'>
<h1 className='title' style={{ textAlign: "center" }}>Markdown Previewer</h1>
<div className='boxes-container'></div>
<div className='editorWrap'>
<div className='toolbar'>
<div className='editor'>
<i className='fab fa-free-code-camp'></i>
Editor
<i className='fa fa-arrows-alt'></i>
</div>
</div>
<textarea
name='editorWrap'
id='editor'
value={markdownText}
onChange={(e) => setMarkdownText(e.target.value)}></textarea>
</div>
<div id='preview'>
<ReactMarkdown>{markdownText}</ReactMarkdown>
</div>
</div>
</>
)
}
export default App
Yes, I know it is possible, the expression “there is no human way to do it” is like a joke, I think making that responsive is going to cost me time. xD
