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

A straightforward jQuery conditional statement for dynamically generated content

If the div '#ajax' contains content, I want to make the div '.container' clickable. Here is the basic jQuery script I have implemented: if ('#ajax:empty') { $('.container').css('pointer-events', ' ...

php$json_data = json_decode($response);

I am brand new to PHP coming from a background in Python. I was fairly comfortable with retrieving JSON results from websites in Python, but for some reason, I can't seem to get it working in PHP. Here is the code snippet I'm using: <?php $ ...

Even when the archive data is Updated in React.js and Next.js, the items within the archive remain unchanged despite any alterations made to

I am currently working on a project using react (nextjs). On the backend, I have products and multilevel categories. I have successfully fetched the data from an API and displayed it on /categories/[slug].jsx. The category details and products for each cat ...

What is the best way to delay JavaScript execution until after React has finished rendering?

Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

Styling components with SASS in NextJS

I've encountered an issue while working on a basic NextJS app, specifically with component-level styling using SASS/SCSS. Initially, everything appears fine when the user lands on the page for the first time. However, as they navigate to different pag ...

Changing HTML tags programmatically in Angular while inheriting a template

In my project, I have a Component called DataGrid that represents a table with expandable rows. Each row can be expanded to show a child DataGrid table, which is similar to the parent DataGrid component. To simplify this setup, I created a base class DataG ...

What steps do I need to take to ensure the progress bar extends all the way to the end of the sn

I am currently facing a challenge where the progress bar line in my message queue does not reach the end of the message before it closes. I have included a brief video showcasing the issue along with the relevant code snippet. Any suggestions or ideas woul ...

Encountered an "next: not found" error when attempting to launch nextjs standalone within Azure Web App

I am having issues deploying my application built with Next.js on an Azure Web App. Despite following the guidelines provided by Microsoft, I encountered a problem while trying to deploy. After compiling the application with the "standalone" flag as instru ...

Need assistance with PHP syntax?

Can you guide me on the correct syntax for creating a target link for a profile? <a href="index.php?p=profile&uid=<?php echo $_SESSION["uid"]; ?>"> <?php echo $_SESSION["username"]; ?></a> The variables I am working with are: ...

When a link is right-clicked, the window.opener property becomes null

Currently, I am utilizing the window.opener property in JavaScript to update the parent window from a child window. The parent window simply consists of a table with data and a link to open the child window. When the child window is launched, a JavaScript ...

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

What is the best way to delete an element from a List using Immutable?

When working with react, redux, and Immutable, I often encounter the need to remove elements from a List. Specifically, how can I efficiently remove an element in a List using Immutable? import Immutable, { List, Map, fromJS } from 'immutable'; ...

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

Material-UI's simplification of 10px comprehension

I'm a bit confused about why we have to do this for the 10px simplification: html { font-size: 62.5%; /* 62.5% of 16px = 10px */ } Shouldn't the following code handle everything? const theme = createMuiTheme({ typography: { // Set the ...

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

Can floating elements be disregarded by block elements?

According to W3C, the behavior of floating elements is such that: When a float is present, non-positioned block boxes that come before and after the float flow vertically as if the float doesn't exist. However, line boxes positioned next to the fl ...

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...