Unusual arrangement of images (HTML, CSS, Bootstrap)

I recently started my journey with freecodecamp a few days ago. I encountered my first project which required me to create a tribute page for anyone in the world. The page needed to include a picture, some text, and a link to an external site.

However, I've been facing an issue with the image placement. In some views, it appears centered and visually appealing. But in other views, it becomes oversized and shifts to the right. I've tried various solutions but nothing seems to work. Below is the HTML and CSS code I have written:

#elonRocket {
  border-radius: 80%;
  border-style: solid;
  border-width: 10px;
}

h1 {
  font-size: 64px;
}

.mainInfo {
  text-align: center;
  margin: 5;
}

.entryTitle {
  padding-top: 100px;
  font-weight: bold;
}
    
.mainEntry {
  background-color: #acb2b7;
  border-style: dashed;
}

#closing {
  text-align: center;
  padding-top: 150px;
}
<div class="container">
  <div class="jumbotron">
    <div class="col-xs-12">
      <div class="page-header">
        <h1 class="text-center page-header" style="font-family: Audimat"><strong>Elon Musk</strong></h1>
      </div>
      <h2 class="text-center"><em>beating the odds</em></h2><br>
      <p style="text-align:center"><img src="http://fossbytes.com/wp-content/uploads/2016/01/space-x-elon-musk-.jpg" id="elonRocket" alt="Elon Musk standing in front of Falcon 9"></p>
      <div class="mainInfo">
        <h2 class="entryTitle">Who is he?</h2>
        <p class="mainEntry">Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s
          when he sold his start-up company, Zip2, to a division of Compaq Computers. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio
          with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.</p>
        <h2 class="entryTitle">What was his childhood like?</h2>
        <p class="mainEntry">During his childhood he was an avid reader. At age 10, he developed an interest in computing with the Commodore VIC-20. He taught himself computer programming at the age of 12, sold the code of a BASIC-based video game he created called Blastar,
          to a magazine called PC and Office Technology, for approximately $500. A web version of the game is available online. His childhood reading included Isaac Asimov's Foundation series from which he drew the lesson that "you should try to take
          the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."</p>
        <h2 class="entryTitle">Where is he headed?</h2>
        <p class="mainEntry">Elon Musk has a lot of life goals, far more than must of us could even fathom. He has made some of his goals public, but I feel as though there is a lot more going on in his intelligent brain.
      </div>
      <div class="mainEntry">
        <ul>
          <li>Create stunning solar roofs with seamlessly integrated battery storage</li>
          <li>Develop a self-driving capability that is 10X safer than manual via massive fleet learning</li>
          <li>Enable your car to make money for you when you aren’t using it</li>
          <li>Travel to mars</li>
          <li>Colonize Mars</li>

          </p>

      </div>

      <h3 id="closing">If you'd like to know more, please feel free to visit the link <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Here!</a></h3>

Answer №1

Simply add the width property to the elonmusk identifier.

#elonRocket {
  border-radius: 80%;
  border-style: solid;
  border-width: 10px;
  width:50%; /* specify the desired width here */
}

h1 {
  font-size: 64px;
}

.mainInfo {
  text-align: center;
  margin: 5;
}

.entryTitle {
  padding-top: 100px;
  font-weight: bold;
}
    
.mainEntry {
  background-color: #acb2b7;
  border-style: dashed;
}

#closing {
  text-align: center;
  padding-top: 150px;
}
<div class="container">
  <div class="jumbotron">
    <div class="col-xs-12">
      <div class="page-header">
        <h1 class="text-center page-header" style="font-family: Audimat"><strong>Elon Musk</strong></h1>
      </div>
      <h2 class="text-center"><em>beating the odds</em></h2><br>
      <p style="text-align:center"><img src="http://fossbytes.com/wp-content/uploads/2016/01/space-x-elon-musk-.jpg" id="elonRocket" alt="Elon Musk standing in front of Falcon 9"></p>
      <div class="mainInfo">
        <h2 class="entryTitle">Who is he?</h2>
        <p class="mainEntry">Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s
          when he sold his start-up company, Zip2, to a division of Compaq Computers. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio
          with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.</p>
        <h2 class="entryTitle">What was his childhood like?</h2>
        <p class="mainEntry">During his childhood he was an avid reader. At age 10, he developed an interest in computing with the Commodore VIC-20. He taught himself computer programming at the age of 12, sold the code of a BASIC-based video game he created called Blastar,
          to a magazine called PC and Office Technology, for approximately $500. A web version of the game is available online. His childhood reading included Isaac Asimov's Foundation series from which he drew the lesson that "you should try to take
          the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."</p>
        <h2 class="entryTitle">Where is he headed?</h2>
        <p class="mainEntry">Elon Musk has a lot of life goals, far more than must of us could even fathom. He has made some of his goals public, but I feel as though there is a lot more going on in his intelligent brain.
      </div>
      <div class="mainEntry">
        <ul>
          <li>Create stunning solar roofs with seamlessly integrated battery storage</li>
          <li>Develop a self-driving capability that is 10X safer than manual via massive fleet learning</li>
          <li>Enable your car to make money for you when you aren’t using it</li>
          <li>Travel to mars</li>
          <li>Colonize Mars</li>

          </p>

      </div>

      <h3 id="closing">If you'd like to know more, please feel free to visit the link <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Here!</a></h3>

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

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

Textbox value disappears after being updated

When I click on the edit link (name), the value from the database is displayed as a textbox. However, when I update another normal textbox (age), the value in the edit link textbox disappears. Strangely, if I input a new value into the edit link textbox, i ...

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

Implementing a keypress function that can handle duplicate names

HTML <input name="pm" type="text" value="0"/> <input name="pm" type="text" value="0"/> <input name="pm" type="text" value="0"/> <input name="total" type="text" value="0" disabled="disabled"/> Javascript $('[name="pm"]' ...

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

Extracting outer td data from a td element containing an inner table using JSoup

Currently, I am utilizing JSoup for the purpose of web scraping. Within my webpage, there is a table with the classname .chart, containing rows (tr) and data cells (td). However, some of these td elements also include nested tables with additional rows and ...

The GridCalendar view of FullCalendar v6.1 is generating 50 `ARIA attribute unsupported or prohibited` errors when analyzed with the SiteImprove browser extension

The Challenges Creating a website that adheres to accessibility laws can be quite daunting. I am currently using SiteImprove, a free browser extension, to check for any issues on my site. Unfortunately, the GridCalendar view is showing 50 errors. ARIA a ...

Guide on adjusting canvas height to match Full Document height (covering entire page)

Hello everyone, I'm getting in the holiday spirit by adding some snow falling effects using Canvas and it looks pretty awesome. The only issue is that it's filling up the entire screen due to: c.width = innerWidth; c.height = innerHeight; If a ...

Ensuring W3C compliance with form elements on the server-side

After running a website HTML validation on w3.org, I encountered the following error: Bad value for the attribute 'action' on the form element: It must be non-empty. My form is an ASP.NET server-side form and I am unable to set the 'acti ...

Explore and target elements using browser inspection

Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...

What could be the reason for the absence of this Javascript function in my attribute?

I have been working on an app using electron, and I have a function that successfully adds tabs to the app. The issue arises when I try to add tabs via JavaScript with the onclick attribute - they show up as expected but do not execute the code to hide and ...

Attempt to insert an HTML page containing a script into a different webpage

Greetings and thank you for taking the time to read my first post here :) I have a script that is functioning properly, here is a simplified version of my page1.html: <html> <head> <script type="text/javascript" src="js/jquery-1.6.4.mi ...

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

Restrict the number of dynamic form elements to a maximum of 10 entries

I am working on a feature where users can refer their friends and the data will be saved in a database. <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' sr ...

Video player on website experiencing issues with playing VAST ads

Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...

Investigating the issue of jQuery autocomplete combobox line items breaking in all versions of Internet Explorer. Let's dive into this matter

Having an autocomplete combobox within a div that expands into a dialog box presents visual issues in Internet Explorer. The line items are tightly packed together and the text is not fully visible. To replicate this error, you can obtain the source code d ...

Can someone explain why my table in Laravel is only showing the third set of data and not the others?

I'm facing an issue with displaying all of the data in my table named taglineImageCarousel. The problem lies in the slide_ID column, where it is being populated with data from slide-01, slide-02, and slide-03. Below is the code snippet: taglineImage ...

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

I am currently utilizing the button below to trigger the opening of a modal window However, upon closing the modal, it seems to maintain a highlighted or clicked appearance with a shadow effect. Initially, I assumed I could address this issue by implement ...

A different option for incorporating interactive external content without using iframes

Excuse me for asking if this question has already been answered, but I was unable to find a solution that fits our specific needs. Is there a more effective method than using an iframe to embed external content in a website? Our objective is to provide a ...

What is the best method for using XMLhttpRequest in PHP to append options to a select element?

I'm looking to dynamically fetch values from a MySQL database using PHP and then add them as choices within a select element. Here is my HTML code: <label for='listDivision'>Division</label><select id='listDivision&apos ...