New filters on the Home Feed, take a look!
view details

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

3
Form Margin-Top Not Working In A Section Container
Post Flair (click to view more posts with a particular flair)
Post Body

Hi there,

I filmed a video of my bug on this video - https://www.loom.com/share/8cf9a7d3ba9147f18de446bcd9996c90

However, for those who want the written description - here's a link what my containers look like- [EDIT: REMOVED SCREENSHOT LINK]

I have one hero section that has two main containers. A form container, and a list container(making a todo app) I've centered the section using flexbox on the body. However, my form container does not apply margin-top. As you can see, it's stuck to the top of the section hero.

Here's my Code

APP.JS

import React, {useState} from "react"


function App() {

  const [name, setName] = useState("")
  const [list, setList] = useState([])
  const [isEditing, setIsEditing] = useState(false)
  const [editId, setEditId] = useState("")


  const handleSubmit = () =>{

  }


  return (
    <section className="hero">
      <form className="form">
          <div className="form-container">
              <input type="text" />
              <button></button>
            </div>       
      </form>

      <div className="list-items">
      </div>
    </section>
  );
}

export default App;

INDEX.CSS

:root{

--blue: #003049; --red: #D62828; --orange: #F77F00; --yellow: #FCBF49; --tan: #EAE2B7; --white: #F5F5F5; }

body {

margin: 0; padding: 0; height: 100vh; background-color: var(--blue); display: flex; justify-content: center;

}

section.hero { background-color:white; height: 15rem; width: 40rem; border-radius: 2rem; margin-top: 25%; padding: 0; }

form { height: 2rem;

padding: 0; display: flex; justify-content: center; border: 1px solid red; } .form-container {

display: flex; justify-content: center;

}

Author
Account Strength
80%
Account Age
4 years
Verified Email
Yes
Verified Flair
No
Total Karma
16
Link Karma
18
Comment Karma
n/a
Profile updated: 1 day ago
Posts updated: 1 year ago

Subreddit

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.
Posted
2 years ago