I am looking to remove all white spaces from my website's HTML code

I am looking to remove all white spaces from my website in html. The more I align my text to the right, the more whitespace it creates on the right side of the page. As seen in the images, there are a lot of whitespaces and I suspect that elements are causing these spaces. Can someone guide me on how to eliminate them? Any assistance would be greatly appreciated.

.btn_earnmoney {
    height: 100px;
    width: 100px;
    position: relative;
    top: 350px;
    left: 710px;
    padding: 0;
    border: none;
    background: none;
  }

  .Balance_Text {
    font-size: 150%;
    position: relative;
    top: -800px;
    left: 10px;
    background-repeat: no-repeat;
  }

  * {
    margin: 0;
    padding: 0;
    background-color: #f1dd84;
    background-repeat: no-repeat;
  }

  .Background_img {
    /* non available image replaced with dummy image */
    background-image: url("https://dummyimage.com/300x300/d936d9/000000&text=some+background+image");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-color: #f1dd84;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BuzzMoney</title>
</head>

<body>
  <button class="btn_earnmoney" onclick="button_pressed()">
  <!-- non available image replaced with dummy image -->
  <img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
  </button>
  <button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
  <div class="Background_img"></div>
  <p class="Balance_Text" id="Balance">0 $</p>
  <script type="text/javascript" src="earnmoney.js"></script>
  <script type="text/javascript" src="disableRightClick.js"></script>
</body>

</html>

Answer №1

My Plan:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BuzzMoney</title>
</head>

<body>
  <button class="btn_earnmoney" onclick="button_pressed()">
  <!-- non available image replaced with dummy image -->
  <img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
  </button>
  <button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
  <p class="Balance_Text" id="Balance">0 $</p>
  <script type="text/javascript" src="earnmoney.js"></script>
  <script type="text/javascript" src="disableRightClick.js"></script>
</body>

</html>

style.css

body {
  background-image: url("yourUrlHere");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

You can discover these background properties in this W3 link

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

Could you provide me with some information regarding the relationship between screen resolution and screen size?

When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...

Node.js and Socket.IO: Managing responses

In a unique scenario, the web page is initially served using HTTP. When the submit button is clicked, data is sent to the server and multiple web services are executed, which may take some time. The challenge is to quickly display the response page and the ...

The Express API will only provide the initial key-value pair of an object in the response

I'm working on fetching nested data objects. Although I can successfully retrieve the object data in the console, I encounter an issue when attempting to access this data using return res.json(imageObject). Instead of retrieving all key-value pairs of ...

Utilizing Promises in the apply function

I am currently working on a project in Node.js that utilizes bluebird for promise handling, as well as ES6 native promises. In both projects, I have a chain where I make a database query structured like this: some_function(/*...*/) .then(function () ...

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

When inserting data into the MongoDB schema presented below, make sure that Employee name, Project name, and client name can be the same, but the employee ID must be unique. Duplicate entries are not allowed. var StatusSchema = new mongoose.Schema({ ...

Updating dropdown selection with JavaScript

I have a dropdown select menu with two options. I am using JavaScript to retrieve the selected value from the drop-down menu and display it in a text area. Here is my code: $(document).ready(function () { $('#pdSev').change(function () { ...

Incorporating React State into CSS Styles

Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The ...

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

Revise shiny datatable to display total column sum differently

This is a follow up question to this inquiry: Adding Total/Subtotal to the bottom of a DataTable in Shiny. Below is the code snippet referenced: library(shiny) library(DT) ui <- shinyUI(fluidPage( h1('Testing TableTools'), mainPanel( ...

Is employing setTimeout a legitimate technique for circumventing a stack overflow issue when implementing callbacks?

Let's imagine a scenario where I deliberately create a complex sequence of callbacks: function handleInput(callback) { ... } function fetchData(url, callback) { ... } function processResponse(callback) { .... } function updateDatabase ...

Validation in PHP and Javascript is only partially effective

I encountered an issue with my form validation setup that utilizes JavaScript, Ajax, and PHP. While the errors are correctly displayed when the form is filled incorrectly, I am unable to submit the form even if there are no errors. Clicking the submit butt ...

Is there a way to display the month values in my dropdown menu using the date format of yyyy-mm-dd?

This is the code snippet I am working with: <form> <table> <tr> <td>Month</td> <td> <select name=""> <option value="">January</optio ...

Having trouble with processing the binding? Use ko.mapping.fromJS to push JSON data into an ObservableArray

Hey everyone, I'm struggling with my code and could really use some help. I'm new to knockout and encountering an issue. Initially, I receive JSON data from the database and it works fine. However, when I click 'Add some', I'm tryi ...

Difficulties arise when dealing with card elements and scrolling on a

Currently working on an ecommerce simulation project for a course, I successfully implemented a featured section with cards. However, when it comes to scrolling, I am facing an issue where the cards overlap with my sticky navbar as I scroll down. If anyo ...

What is the frequency of page rendering in Angular 2 before displaying it?

I've been working with Angular 2 on a project lately. In my template, I have a simple div that triggers a function in my .ts file to display basic text like so: <div>{{ test() }}</div> test(): void { console.log("Test text") ...

Why isn't this code performing well when trying to alter the styling of DOM elements?

JavaScript is causing major issues and is performing poorly. Why is this code not working properly?? (this is a back to top button) function checkScrollTop(){ if (document.body.scrollTop > 300) { document.getElementById("backToTop").style.dis ...

Execute the second method once the first method has completed its execution

As I develop my npm package, I am faced with the challenge of ensuring that one method waits for another to complete before executing. For example: var package = require('myNpmPackage'); package.method1(options); ... Later on, possibly in a dif ...

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

Utilize three.js to set the camera's position and rotation

In my current setup, I have a particular object in view using a PerspectiveCamera. By utilizing OrbitControls, I can navigate around the object, rotate it, pan it, and more. My goal is to reposition the object to a specific location at a specific angle an ...