Changing the background color using ReactJS

After streamlining my project to focus on the main issue, I am still facing a problem. Here is the relevant code snippet:

.App{
  background-color: aqua;
}
.AboutMe{
  color:blue;
  background-color: yellow;
}

This is from App.js:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="AboutMe">
          Akshay Gulabrao<br/>
          <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4d475f4b594040646164374b4c">[email protected]</a><br/>
          +1 (818) 518-8295<br/>
      </div>
    </div>
    
    
  );
}

export default App;

Despite expecting a light blue background, I encountered an issue where no background was displayed.

Answer №1

The issue at hand is that the "App" div is not occupying the entire vertical space of the screen.

You can try fixing this by adjusting the height property to 100vh (which represents 100% of the viewport's height):

.App {
  background-color: aqua;
  height: 100vh;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting HTML form data to a Java class via JavaScript, following validation with JavaScript within a JSP file

I am struggling with posting data obtained from an html form created in a jsp file using javascript and sending it to a java class after validating the form data. I was exploring alternatives to Ajax since I am not well-versed with those tools, but if you ...

After changing pages, the checkbox's state is reset to empty

I am currently working with an array of objects structured as follows: const columns = [ { key: "Source_campname", title: "TS Camp Name", customElement: function (row) { return ( <FormControlL ...

Shifting Transition for Customer Reviews

I am working on implementing a testimonial slider on my webpage located at . I am trying to make it automatically slide by itself, but have been unsuccessful so far. I would appreciate if you could visit the demo page on my website and help identify what ...

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

What is the method for stretching the navbar and content to fill the entire viewport in Bootstrap?

Can anyone help me with an issue regarding a navigation bar and content created in Bootstrap 5? I'm trying to use vh-100 to make both the navigation bar and content stay on the view page without a scrollbar. However, the size of the navigation bar is ...

How to Load a 3D Model (.obj, .glb) in React Using Three.js Setup

I am trying to integrate my 3D model from Blender into my React App using Three.js. Can anyone advise me on what functions I need and where they should be placed in my code? This is the structure of my app: -public (my glb model) -src -assets -compon ...

unable to import React Component

As I embark on creating a simple example React project, my goal is to utilize the npm package drag and drop file picker found at: https://www.npmjs.com/package/@yelysei/react-files-drag-and-drop To begin, I initiated a fresh React project using npx create ...

Clickable Slider Picture

I'm having a minor issue with a jQuery script that slides images on my website. The script itself is functioning properly, but I am trying to add links to each image. I've attempted placing <a href> and </a> tags around the <img> ...

What is the best way to update a React state with JSON data?

Currently, I am dealing with a React component that sends a post request to an Express server hosted by myself. The server employs web3 for signing transactions on the Ethereum blockchain. Upon successful inclusion of the transaction in a block, a JSON obj ...

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

I'm currently using magnific popup for an inline gallery, but I'm not seeing any effects. I would like to have a fade effect when opening/closing the popup. Can someone assist me with achieving this? https://jsfiddle.net/gbp31r8n/3/ [Check o ...

Enhance your breadcrumb experience with MUI Breadcrumbs in React Router by customizing the labels

I have successfully implemented breadcrumbs using MUI and React Router. import React from "react"; import { Breadcrumbs as AppBreadcrumbs, Link, Typography, } from "@material-ui/core"; import { withRouter } from "react-router ...

Broken Mui Input - Full width with attributes for minimum and maximum values

I've created a sandbox to demonstrate an issue I came across that seems unbelievable, but it's happening. Here's the link: https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097 The problem is simple - when both the ht ...

The Babel 5 plugin is encountering an issue due to an incompatible Babel version being used

Upon adding the relay-query plugin using yarn add -D babel-plugin-react-relay, and starting the development server, an error is encountered: Error: [BABEL] /Users/nemanja/sites/tictacturing/src/index.js: The (relay-query) Babel 5 plugin is being run with ...

Utilizing MDX Component Properties in NextJS

Currently, I am in the process of developing a layout system for my upcoming app inspired by Adam Wathan's approach and his tailwind website. While I have successfully implemented it for js files, I am facing issues trying to apply the same syntax to ...

What is the best way to pause function execution until a user action is completed within a separate Modal?

I'm currently working on a drink tracking application. Users have the ability to add drinks, but there is also a drink limit feature in place to alert them when they reach their set limit. A modal will pop up with options to cancel or continue adding ...

Attempting to label my Markers and display an InfoWindow using the google-maps-react component

I am struggling with displaying the index from my JSON data on google-maps-react. Although I can see all the markers mapped out, they only show as default markers without any additional popup window appearing. I tried placing an <InfoWindow> but Reac ...

Why do I keep encountering a null window object issue while using my iPhone?

Hey there! I've got a React game and whenever the user loses, a new window pops up. const lossWindow = window.open( "", "", "width=500, height=300, top=200, left = 200" ); lossWindow.document.write( & ...

Embrace exporting instead of importing everything with an asterisk

I am searching for a method to prioritize exporting over importing for non-default exports. I am familiar with the process for default exports: export ( default as DefaultExport ) from './default_export'; However, does anyone know the correct a ...

How can I apply CSS properties to a div class by targeting another child div class?

When the div class dhx_list_item dhx_list_day_events_item is present, I need to apply the following CSS: .dhx_view .day_events .dhx_scroll_cont:first-of-type:before { //some code here } Please see the attachment for reference. ...

What is the best way to apply a texture in react-three-fiber?

const texture = useLoader(THREE.TextureLoader, 'assets/texture.png') return ( <mesh position={[-0.00008, -0.00008, -1.26303]}> {/*Alioth*/} <sphereBufferGeometry attach="geometry" args={[1.26068]} > ...