CODEWITHSUNDEEP
htmlcssreactjs
user8620648
user8620648

Reputation: 33

align title header above body component using css for react app

Here we can see the horrific rendering of my app:

enter image description here

In the App itself I render those components like so:

render() {
  return (
    <div className="App">

    <div className="title_component">
      <header className="App-header">
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>



      <Result text={this.state.equation}/>
      <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation}/>
      <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                               evalEquation={this.evalEquation}/>
    </div>
  );
}

}

However, I guess what's more important is the css, which I'm really not an expert in... is where I'm at right now: 

.title_component{
    top: 0
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: relative;

  top: 0;
  left: 0;

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, #5cefff 0%, #a25129 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #d55b5b;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}

.btn:hover {background-color: #bd5151}

.btn:active {
  background-color: #bd5151;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-rows: 60px;
  grid-template-areas:
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}

.result {
  background-color: white;
  text-align: right;
  grid-area: result;
}

.numbers {
  grid-area: numbers;
}

.equations {
  grid-area: equations;
}

/* equations */

.btn-equation-+ {
  grid-area: plus
}
.btn-equation-- {
  grid-area: minus
}
.btn-equation-* {
  grid-area: multiply
}
.btn-equation-/ {
  grid-area: divide
}

.btn-equation-= {
  grid-area: equal
}
.btn-equation-container {
  display: grid;
  grid-template-columns: 80px;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-areas:
    "plus"
    "minus"
    "multiply"
    "divide"
    "equal";
}

/* Numbers */

.btn-number-D {
  grid-area: btn-number-D;
}

.btn-number-0 {
  grid-area: btn-number-0;
}

.btn-number-1 {
  grid-area: btn-number-1;
}

.btn-number-2 {
  grid-area: btn-number-2;
}

.btn-number-3 {
  grid-area: btn-number-3;
}

.btn-number-4 {
  grid-area: btn-number-4;
}

.btn-number-5 {
  grid-area: btn-number-5;
}

.btn-number-6 {
  grid-area: btn-number-6;
}

.btn-number-7 {
  grid-area: btn-number-7;
}

.btn-number-8 {
  grid-area: btn-number-8;
}

.btn-number-9 {
  grid-area: btn-number-9;
}
.btn-number-R {
  grid-area: btn-number-R;
}

.btn-number-container {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: auto;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-areas:
    "btn-number-1 btn-number-2 btn-number-3"
    "btn-number-4 btn-number-5 btn-number-6"
    "btn-number-7 btn-number-8 btn-number-9"
    "btn-number-D btn-number-0 btn-number-R";
}

What do I need to do to that css to make the title display on top of the calculator?

My idea what that maybe I can make the bottom of the title absolutely always on top of the calculator- but I'm not skillful enough in css to actually make that happen- what is involved in such a procedure?

UPDATE

Now it renders like so:

enter image description here

With the following css:

.title_component{
  grid-area: title_component;
}
.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-rows: 60px;
  grid-template-areas:
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}



.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: relative;

  top: 0;
  left: 0;

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, #5cefff 0%, #a25129 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #d55b5b;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}

.btn:hover {background-color: #bd5151}

.btn:active {
  background-color: #bd5151;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}





.result {
  background-color: white;
  text-align: right;
  grid-area: result;
}

.numbers {
  grid-area: numbers;
}

.equations {
  grid-area: equations;
}

/* equations */

.btn-equation-+ {
  grid-area: plus
}
.btn-equation-- {
  grid-area: minus
}
.btn-equation-* {
  grid-area: multiply
}
.btn-equation-/ {
  grid-area: divide
}

.btn-equation-= {
  grid-area: equal
}
.btn-equation-container {
  display: grid;
  grid-template-columns: 80px;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-areas:
    "plus"
    "minus"
    "multiply"
    "divide"
    "equal";
}

/* Numbers */

.btn-number-D {
  grid-area: btn-number-D;
}

.btn-number-0 {
  grid-area: btn-number-0;
}

.btn-number-1 {
  grid-area: btn-number-1;
}

.btn-number-2 {
  grid-area: btn-number-2;
}

.btn-number-3 {
  grid-area: btn-number-3;
}

.btn-number-4 {
  grid-area: btn-number-4;
}

.btn-number-5 {
  grid-area: btn-number-5;
}

.btn-number-6 {
  grid-area: btn-number-6;
}

.btn-number-7 {
  grid-area: btn-number-7;
}

.btn-number-8 {
  grid-area: btn-number-8;
}

.btn-number-9 {
  grid-area: btn-number-9;
}
.btn-number-R {
  grid-area: btn-number-R;
}

.btn-number-container {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: auto;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-template-areas:
    "btn-number-1 btn-number-2 btn-number-3"
    "btn-number-4 btn-number-5 btn-number-6"
    "btn-number-7 btn-number-8 btn-number-9"
    "btn-number-D btn-number-0 btn-number-R";
}

Upvotes: 0

Views: 1036

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58593

I think this is the output you want :

enter image description here

Here are the changes in css :

.title_component{
  grid-area: title_component;
}

.App {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-column-gap: 5px;
  grid-template-areas:
    "title_component title_component title_component title_component"
    "result  result  result  result"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    "numbers numbers numbers equations"
    ".       .       .       equations";
}

Upvotes: 1

Related Questions