Markdown not responsive toolbar

JavaScript
1

Hello everybody!

Could someone help me with this please? Thanks a lot!

I attach 2 screenshots where you can see.

Screenshot 2023-09-12 at 06-44-20 Markdown Previewer
Screenshot 2023-09-12 at 06-44-20 Markdown Previewer2108×1754 144 KB

Screenshot 2023-09-12 at 06-44-07 Markdown Previewer
Screenshot 2023-09-12 at 06-44-07 Markdown Previewer2108×1514 138 KB

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:

![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
`;

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

app.css

* {
  box-sizing: border-box;
}

.body {
  background-color: darkgray;
  }

.title {
  text-align: center;
  margin: auto;
  margin-top: 40px;
  font-family: Russo One;
  background-color: black;
  color: pink;
  }

.boxes-container {
  position: relative;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: auto;
  margin-top: 40px;
  width: 30%;
}

.editorWrap .toolbar {
  width: 100%;
  max-width: 100%;
  position: relative;
 }

.editorWrap {
  position: relative;
  max-width: 100%;
  width: 500px;
  margin: auto;
}

.toolbar {
  position: relative;
  max-width: 100%;
  display: flex;
  background-color: lightpink;
  padding: 0.3rem;
  border: 1px solid pink;
  box-shadow: pink;
  font-family: Russo One;
  font-size: 1rem;
  color: pink;
  text-align: center;
  margin: auto;
}

.editor {
  max-width: 100%;
  position: relative;
  display: flex;
  font-size: 18px;
  text-align: center;
  color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  left: 210px;
  top: -50%; 
}

.fab {
  max-width: 100%;
  position: relative;
  left: -200px;
}

.fa {
  max-width: 100%;
  position: relative;
  right: -180px;
}

#editor {
  max-width: 100%;
  margin: auto;
  width: 500px;
  height: 40vb;
  font-size: 18px;
  background-color: lightpink;
  text-align: left;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@media screen and (max-width: 500px) {
  .editorWrap {
    width: calc(100% - 40px);
  }
}

.editorWrap textarea {
  max-width: 100%;
  position: relative;
  min-height: 200px;
  margin-bottom: -5px;
  resize: vertical;
  outline: none;
  padding-left: 5px;
  padding-top: 5px;
  font-size: 0.875rem;
  }

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" defer></script>
    <title>Markdown Previewer</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Thank You!

2

Please post a Stackblitz or Codesandbox instead of just code. You are much more likely to get help if you do that.

I think your main issue is the fixed pixel values you have for the position offsets (i.e. left/right/top/bottom). Use percentages instead.

Also, if you want to center a positioned element.

left: 50%;
top: 50%;
translate: -50% -50%;

Also, I would suggest you put the “Editor” text inside an element so you can use Flexbox on the parent and use the space distribution/alignment.

As an aside.

const [markdownText, setMarkdownText] = useState<string>(text);

You do not need to use a generic here as you are initializing the state with a string so it will be inferred as a string.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.