CODEWITHSUNDEEP
htmlcssreactjs
Prashin Jeevaganth
Prashin Jeevaganth

Reputation: 1343

Page background not fully coloured

I’m writing a small web application for myself, hopefully it is usable on phone. I ran into a problem being that my language page wasn’t fully coloured blue in the background. I tried some solutions, but am not able to get a complete fix on the colouring.

Can someone help me out here?

Deployed version(2nd page): https://morning-dusk-53803.herokuapp.com/

Picture of problem: Language Page

App.css

/* #root,
#root > div {
  width: 100%;
  height: 100%;
  background-color: #4d92fb;

} */
/* html, body {
  overflow: hidden;
} */
.loginButton {
  text-align: center;
  font: "Roboto Condensed";
  font-size: 6vm;
  color: white;
}

.Title {
  display: block;
  text-align: center;
  font-family: "Allerta Stencil";
  font-style: normal;
  font-size: 17vw;
  color: #fafe43;
}

.languagePage {
  /*height: 100vh;*/
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: #4d92fb;
  minHeight: 100vh;
  minWidth: 100vw;
}
/* footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Height of the footer
  background: #4d92fb;
} */
.container {
  height: 100%;
  width: 100%;
  background-color: #4d92fb;
  minHeight: 100vh;
  minWidth: 100vw;
  /* overflow: hidden; */
}

#map {
  height: 100vh;
}

Language.js

import React from "react";
import { Link } from "react-router-dom";
import "./App.css";

//Choose langauge, but all buttons go to same place anyway. Could use some styling

function Language() {
  return (
    <body className="languagePage">
      <div>
        <p style={{fontSize:"15vw", font:"Merriweather"}}> LANGUAGE </p>
        <div>
          <button style={{ backgroundColor: "#FF6565", borderRadius: "15px" }}>
            <Link to="/GeneralInfo">
              <span style={{ fontSize: "10vw", color: "black" }}>English</span>
            </Link>
          </button>{" "}
        </div>
        <br />
        <div>
          <button style={{ backgroundColor: "#FD9535", borderRadius: "15px" }}>
            <Link to="/GeneralInfo">
              <span style={{ fontSize: "10vw", color: "black" }}>中文</span>
            </Link>
          </button>{" "}
        </div>
        <br />
        <div>
          <button style={{ backgroundColor: "#9CE939", borderRadius: "15px" }}>
            <Link to="/GeneralInfo">
              <span style={{ fontSize: "10vw", color: "black" }}>
                Bahasa Melayu
              </span>
            </Link>
          </button>{" "}
        </div>
        <br />
        <div>
          <button style={{ backgroundColor: "#9CE939", borderRadius: "15px" }}>
            <Link to="/GeneralInfo">
              <span style={{ fontSize: "10vw", color: "black" }}>Tamil</span>
            </Link>
          </button>{" "}
        </div>
      </div>
    </body>
  );
}

export default Language;

Upvotes: 2

Views: 125

Answers (2)

Sumit Patel
Sumit Patel

Reputation: 4638

You have to update your below css from 100% to 100vh will give you desire output.

.languagePage {
  height: 100vh;
  width: 100%;
  text-align: center;
  background-color: #4d92fb;
}

Upvotes: 0

sebastienbarbier
sebastienbarbier

Reputation: 6832

As your background color is applied to body, i could fix by applying a minimum height to it:

body {
    min-height: 100vh;
}

Simple CSS issue, if your content is not big enough your body will not cover your viewport. As you applied a background-color: #fff; to <body>. An other option is to apply the blue backgroung directly to body but I guess you might have a reason not to do so 😁.

Upvotes: 1

Related Questions