There are various webpages available on GitHub Pages and also on the live server

After creating a web page using HTML, CSS, and Bootstrap, I uploaded it to GitHub Pages. However, when I viewed the page through VS Code, it looked different from how it appeared on GitHub Pages.

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

<head>
  <meta charset="UTF-8">
  <title>Tribute Page Steve Jobs
  </title>
  <link rel="stylesheet" href="styles.css" />
</head>
<main id="main">
  <h1 id="title">Steve Jobs</h1>
  <p>American entrepreneur, inventor, and industrial designer, widely recognized as a pioneer of the information
    technology era. Co-founder, Chairman of the Board of Directors, and CEO of Apple Corporation. Co-founder and CEO of
    Pixar film studio.</p>
  <figure id="img-div">
    <img id="image" src="https://appleinsider.ru/wp-content/uploads/2020/05/jobs_wallpapers.jpg" alt="Steve Jobs" />
    <figcaption id="img-caption">One of the best businessman in the world</figcaption>
  </figure>
  <section id="tribute-info">
    <h2>Steve Jobs Achievements</h2>
    <ul>
      <li><strong>1976</strong> - along with Wozniak, he founded ‘Apple Computer Company’. Initially, the company mainly
        aimed at selling circuit boards. Same year, Wozniak invented the Apple I computer. </li>
      <li><strong>1985</strong> - difference of opinion between him and the company’s CEO John Sculley led to Jobs
        resigning from his own founded company. In the same year, he founded NeXT Inc. The company was famous for its
        technical strengths especially its object-oriented software development system.
      </li>
      <li><strong>1986</strong> - he bought the Graphics Group (later renamed Pixar) from Lucasfilm's computer graphics
        division. ‘Toy Story’ was the first animation film that was released after the acquirement.
      </li>
      <li><strong>1996</strong> - when Apple acquired NeXT Inc, he returned to his own co-founded company as a de facto
        chief in the company and was formally named interim chief executive.
      </li>
      <li>Under his guidance, a number of projects were disbanded. He introduced a whole new range of products which
        steeply increased the sales of the company, making it one of the electronic giants in the world.

      </li>
      <li><strong>Etc</strong></li>
      <ul>
        <h4>You can read more about this person here
          <a href="https://en.wikipedia.org/wiki/Steve_Jobs" id="tribute-link" target="_blank">Wikipedia article</a>
        </h4>
  </section>


</main>

body{
  background-color: black;
}
#image{
  max-width: 100%;
  height: auto;
  display: block;


}

h1,p,figcaption,h2,h4,li{
  color: white;
  font-size: 1.5rem;
  

}
a{
  background-color: gray;
  color: white;
  
}


() Picture on live server Picture on live server Picture on github pages Picture on github pages

I attempted to modify the font size, utilizing Bootstrap 5 for the desired effect.

Answer №1

I discovered the issue and resolved it by adjusting the font size within the browser settings.

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 anyone explain to me why the "thumbnails" in my code link are not aligning in a row format as intended?

Why are my "thumbnails" not aligning correctly in the row format I want on this code link? <div class="row"> <div class= "col-md-6"> <div class="thumbnail"> <a target="_blank" href="http://codepen.io/ ...

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

Align a series of divs in the center with variable width and height

I have a dilemma with my large div that contains multiple thumbnails. I am looking to center the thumbnails within the div and have the overall div centered on the page. Additionally, I want the width of the div to be flexible so that all thumbnails can be ...

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

Guide to transforming the image's color with CSS3

Is there a way to transform the color of an image from grayscale to green, red, or yellow using CSS3? I attempted the code below but unfortunately, it did not produce the desired result. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotat ...

A JavaScript or CSS file within an HTML document

I understand this may seem like a silly question. However, out of curiosity, is there a way to upload an HTML file (with a .html extension) as a JavaScript or CSS file (renamed with a .js or .css extension), specifying the type header as either HTML or js ...

perfecting the animation of popovers

When I click on the button, a popover appears. However, the pointer of the popover seems to be coming from a different direction. I have been struggling to correct this issue. Any suggestions? .popover { position: absolute; top: 50px; left: -175px ...

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

Tips for Aligning a Collection of Relative Positioned Divs within a Parent Relative Positioned Div

Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned. The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is w ...

Text overflowing from image on Bootstrap 4 card with image overlay

Having an issue with the text overlay on my image, especially on mobile (small/xs) screens where the play button and title are extending beyond the image due to long paragraph text. Which bootstrap class should I adjust to fix this issue? I was expecting t ...

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

What is the best way to add HTML formatted text into Outlook?

In my Emacs, I've generated this syntax-highlighted code snippet and now want to paste it into an Outlook email with rendered HTML (without the actual HTML code). <pre> <span style="color: #a020f0; background-color: gtk_selection_bg_color;"& ...

Overlapping Image Arrows with CSS Styling

After receiving a design with what appeared to be a simple feature from a designer, I discovered that implementing it was more complex than expected. Specifically, I needed to create a CSS3 arrow with an image as the fill color in order to overlap the unde ...

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

Encountering difficulties connecting to the database within Vue data tables

My php script was working fine with vuetify data, but now every page is showing the error message: Your search for "{{ search }}" found no results. It seems like this issue occurs when the script cannot fetch data from the database. Here is my d ...

Is it feasible to share HTML5 media captures and display them in real-time on another page within the website?

Recently, I just learned about the html5 media capture API and I am excited to start experimenting with it. One thing that caught my attention is capturing the camera on the same page, but I haven't come across any information about streaming through ...

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

What could be causing the issue with perspective not functioning properly?

I'm attempting to create a simple 3D square shape. div { width: 300px; height: 300px; background: #333; transform: rotateX(50deg); -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); -ms-transform: rotateX(50deg); perspective: ...