Adjusting Font Size on a Website: A Quick Guide

I recently started diving into the world of building web pages. To practice, I created a simple site but for some reason, I'm having trouble changing the text size.

When I try to remove the background image code, it seems to work fine, but I can't just do that:

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <script src="jquery/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("h1, p").addClass("dark");
        $("div").addClass("important");
      });
    });
  </script>
  <style>
    body,
    html {
      height: 100%;
    }

    #grad1 {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      p {
        font-size: 28px;
      }

      .important {
        font-weight: bold;
        font-size: xx-large;
      }

      .dark {
        color: dark;
      }
  </style>
</head>

<body>

  <div id="grad1">
    <div class="container">
      <h1 align="center">Dzīves jēga</h1><br><br>
      <p align="center"><dfn>“Dzīves jēga nav gaidīt, kad beigsies
          negaiss..
          bet gan iemācīties dejot lietū!”</dfn></p>
      <button type="button" class="btn btn-lg btn-info">Changes are
        inevitable</button>
    </div>
  </div>

</body>

I've been stuck here trying to figure this out for the past couple of days.

Answer №1

The problem arose because the closing bracket for the #grad1 style was missing.

Update the style as follows:

#grad1 {
  background-image: url("https://example.com/image.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

You can find the JS Fiddle here

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

What is the process for implementing document.ondrop with Firefox?

I'm experiencing an issue where the document.ondrop function seems to be working in Chrome, but not in Firefox. Here's a link to an example demonstrating the problem: In the example, if you try to drop a file onto the page, it should trigger an ...

Is it possible to invoke this JavaScript function like this?

Is there a way to call a function like item_edit.say hello by passing it as a string on the window object (similar to the last line in the snippet below)? var arc={ view: { item_edit: {} } }; arc.view.item_edit={ say_hello: function(){ alert(' ...

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

Guide on iterating through multiple Objects while comparing key values with a string

My goal is to iterate through multiple objects, comparing the date_created key value of each object to a specific string. These objects are retrieved from an array that I can map over to display the results. Once I loop through each object, I want to push ...

The catch block seems to be failing to capture the errors thrown by the fetch API

I am facing an issue with my code where the fetch method, enclosed within a catch block, fails to capture errors. Despite attempting various error handling approaches on my node backend, the problem persists. https://i.stack.imgur.com/0reJj.png const e ...

Tips for transferring data from a pop-up or modal window to the main window in ASP.NET MVC

Currently, I am in the process of developing a contact form within ASP.NET MVC. This contact form will allow users to easily attach regular files through traditional file and browse functions. Additionally, users will have the option to search for a specif ...

Adding caller information to error stack trace in a Node.js application

I have a function named inner that executes a series of asynchronous operations: function inner(input) { return step1(input) .then(step2) .then(step3) .catch((e) => { throw e }) } I propagate the error from inner so I can m ...

Executing a JavaScript function from one page on a separate webpage

I am trying to link three pages together: dashboard.html, documents.jsp, and documents.js In the dashboard.html file, I have a hyperlink that should take the user to documents.jsp and also trigger a function in the documents.js file, which is included in ...

Utilizing dynamic jQuery events with variable integration

I'm having some trouble incorporating a variable into a dynamically added jQuery event. Every time I click, the message displayed is "The number is 3" for all div elements. $( document ).ready(function() { for (var i = 0; i < 3; i++) { ...

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

How can I remove the excess space above and below tables that have differing numbers of rows?

Forgive me if my question seems basic or if there are any errors in it. I am new to HTML/CSS and collaboration tools like this platform. While I understand that these are not your typical HTML tables, they are what I've found to be the most effective ...

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

Executing a secondary function only once after a repeated condition has been met

Functionality: The secondary function is triggered when the initial condition is met and satisfied. This means that if the condition is true, the secondary function will be executed. However, the secondary function should only be triggered once until the ...

Creating a receipt program in Python and protecting previous data from being overwritten

I am currently learning Python and attempting to create a program that generates an invoice listing all items, along with their prices and quantities. Each item should be displayed on a separate line. While I have managed to print each item in a line, I a ...

Creating Various Views of the Same 3D Model

After creating a 3D model from Mixamo and converting it into a component using npx gltfjsx, I am facing an issue when trying to render this model multiple times on Canvas. Despite my attempts, only one instance of the model appears. Is there a solution to ...

Session authentication mechanism designed to remain active only as long as the browser tab is open

Imagine you are developing a front-end application that utilizes a third-party API for authentication, with a successful authentication resulting in a JSON web token. What strategies would be most effective for storing this token and establishing a user s ...

Creating a unique CSS grid layout with custom borders

Just a quick question, I'm wondering how you would approach creating this type of effect using CSS? https://i.sstatic.net/rYCJn.png The concept revolves around building the grid using bootstrap. As the screen size decreases, the grid transitions to ...

How does Ruby on Rails facilitate interactions between multiplayer users and visitors?

I am looking to create a way for visitors to interact on my website. Imagine a virtual chat space. This involves collecting and sharing data among users, which can be accomplished using ajax or similar methods. However, I'm wondering if there are ex ...

Utilizing HTML to hide rows within a table by comparing each row with the one that comes before it

I am in need of assistance to solve a project I am working on that involves a table structure similar to this: https://i.sstatic.net/U0AI4.png Below is the code snippet I am currently using: <table class = "table table-striped table-hover"&g ...

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...