Reputation: 87

One div won't align with the rest xs

This is what I'm talking about. https://skullscream.github.io/tributepage/

When it's col-lg it gets aligned nicely but when you scale it down completely to col-xs and col-sm the "biography" paragraph isn't aligned with the rest. Can someone explain it to me why this is happening? I'd rather to get an explanation than the solution :)

HTML

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
    background-color: white;
    font-size: 16px;
}

/* Section 1 */

.heading-pictures {
    margin-top: 2%;
}

#top-picture {
    margin-bottom: -4%;
}


.paragraph {
    background-color: #95a5a6;
    padding: 2%;
    color: white;
    text-align: justify;
}

.title {
    position: absolute;
    color: #6c7878;
}

.hd1 {
    font-size: 5.25em;
}

.hd1,
.hd2 {
    text-align: center;
    padding-top: 15%;
    line-height: 1;
}

.hd2 {
    padding-top: 5%;
    border-top: 1px solid #6c7878;
}

.section1 {
    position: relative;
}

div.paragraph-quote {
    margin-bottom: 4%;
    background-color: rgba(0, 0, 0, 0)
}
  
hr.style-one {
    border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

/* Section 2 */

.inventions {
    width: 100%;
}

.images {
    margin-top: 2%;
}

.section2 p {
    text-align: center;
    font-size: 2.5em;
    color: #6c7878;
    padding-top: 2%;
}

.section2 div {
    padding-bottom: 2%;
}

.tesla-patents p {
    text-align: justify;
    color: white;
    background-color: #95a5a6;
    font-size: 1em;
    padding: 1.5%;
    margin-top: 1%;
}

.tesla-patents p span a {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

.tesla-patents p span a:hover, 
.tesla-patents p span a:visited {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

/* Section 3 */

.bio-heading {
    font-size: 2.5em;
    color: #6c7878;
    padding: 0;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 3%;
}

#detailed-bio p {
    text-align: justify;
    color: white;
    background-color: #95a5a6;
    font-size: 1em;
    padding: 1.5%;
    margin-top: 1%;
}

#detailed-bio p a {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}

#detailed-bio p a:hover, 
#detailed-bio p a:visited {
    color: white;
    background-color: #95a5a6;
    font-style: italic;
    float: right;
    text-decoration: underline;
}


footer {
    font-size: .7em;
    margin-bottom: 1%;
    text-align: center;
}

#detailed-bio {
    margin: 0 1% 0 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Nikola Tesla, Engineer and Inventor</title>
    <link href="tribute.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  
<head>
  <title>Nikola Tesla, Engineer and Inventor</title>
</head>


<body>
  <div class="container-fluid">
      
      <!-- Section 1 -->
      <div class="row">
          <div class="section1 col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12"><p class="hd1">Nikola Tesla</p><p class="hd2">Inventor and Engineer</p></div>
            <div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">

              <img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
            </div>

            <div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
              <p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>  
            </div>
          </div> 
      </div>
      
      <hr class="style-one">
      
      <!-- Section 2 -->
      <div class="row">
        <div class="section2 col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <p>What is Nikola Tesla known for?</p>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
        </div>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
        </div>
        <div class="images col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
        </div>
      
          <div class="tesla-patents col-lg-12 col-md-12 col-sm-11 col-xs-12">
            <p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
          </div>
            </div>
    </div>
      
      <hr class="style-one">
      
      <!-- Section 3 -->
      
    <div class="row">
        <div class="bio-section col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <p class="bio-heading">Biography</p>
         <div id="detailed-bio">   
            <p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of  the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p> 
        </div>
      </div>
        
  </div>
      <hr class="style-one">
        <footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
   
    </div>
</body>
</html>

Upvotes: 1

Answers (3)

AlexG

Reputation: 5919

Thats because you're using the bootstrap syntax incorrectly (partly).

When using columns alternate columns and rows. You're currently nesting columns in columns.

container
|   row
|   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   |   row
|   |   |   |   column
|   |   |   |   column
|   |   column

This might help you as well: Bootstrap Guidelines

Adjusted code:

Remove the margin on #detailed-bio and adjust the code like so:

<div class="container-fluid">
    <!-- Section 1 -->
    <div class="row">
        <div class="section1 col-xs-12">
            <div class="row">
                <div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
                    <p class="hd1">Nikola Tesla</p>
                    <p class="hd2">Inventor and Engineer</p>
                </div>

                <div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
                    <img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
                </div>

                <div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
                    <p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." &nbsp;&nbsp;- Nikola Tesla</p>
                </div>
            </div>
        </div>
    </div>

    <hr class="style-one">

    <!-- Section 2 -->
    <div class="row">
        <div class="section2 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <p>What is Nikola Tesla known for?</p>
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg">
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
                </div>
                <div class="images col-lg-4 col-xs-12">
                    <img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
                </div>

                <div class="tesla-patents col-xs-12">
                    <p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
                </div>
            </div>
        </div>
    </div>

    <hr class="style-one">

    <!-- Section 3 -->

    <div class="row">
        <div class="bio-section col-xs-12">
            <p class="bio-heading">Biography</p>
            <div id="detailed-bio">
                <p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of  the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
            </div>
        </div>

    </div>
    <hr class="style-one">
    <footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>

(removed unnecessary bootstrap classes)

Upvotes: 2

Paramaguru Manickavasagam

Reputation: 66

increase the margin-left and margin-right of detailed-bio div into 2%. Like below

#detailed-bio { margin: 0 2% 0 2%; }

Upvotes: 0

Sidharth Gusain

Reputation: 1501

Edit this div

<div id="detailed-bio">
  <p></p>
</div>

<div id="detailed-bio" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <p></p>
</div>

Upvotes: 1

One div won&#39;t align with the rest xs

Answers (3)

Adjusted code:

Related Questions

One div won't align with the rest xs