Col-md-6 doesn't seem to be working

Col-md-6 doesn't seem to be working
0

#1

Hi everyone, I got really stuck here. It seems as if I am doing everything according to the rules but my Pen just doesn’t want to listen to me.

Could anyone please help me with that?


#2

You have some other things that are not working correctly in the About section, but if you are asking about the Portfolio section, how are you expecting it to layout on mobile vs. desktop?

Edit: I think you have an extra </div> before the second <div class = "col-md-6"> which is causing trouble with the div with class=“row” in the Portfolio section.


#3

Yes, you’re absolutely right, I have the same problem in the " About " section, and I don’t know how to fix it :frowning: But in this section, everything’d worked properly until I accidentally deleted one part of this code and had to write it one more time. Could you please explain to me what I am doing wrong?


#4

Thank you! I will try it out let you know if it worked!


#5

Unfortunately, it didn’t work :frowning:


#6

The portfolio section looks much better since you got rid of that extra closing div that did not belong.

You are missing a </a> after Portfolio in your menu.

The following pageOne section has at least 4 extra double quotes ( " ) that you need to delete.

    <div class = "btnList">
      <a class = "btn btn-default href = "#""><i class="fa fa-instagram" aria-hidden="true"></i>Instagram</a>
      <a class = "btn btn-default" href = "#""><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
      <a class = "btn btn-default"" href = "#""><i class="fa fa-free-code-camp" aria-hidden="true"></i>FreeCodeCamp</a>
      </div>
                                               <div class = "block text-center">
     <h1 class = "quote"">To acquire knowledge, one must study;
but to acquire wisdom, one must observe.</h1>

To fix most of the about page problems, you first need to modify the existing CSS selectors as follows:

.about{
  margin-top:20px;
  color:black;
  font-size:18px;
  padding:4px;
}
.aboutTwo{
  color:black;
  font-size:12px;
}
.me{
  height:200px;
  border-radius:20%;
}

and then add this:

.row h1 {
  color:black;
}

The extra part above will allow you to have the following HTML for your pageTwo and pageThree:

<div class="pageTwo" id="pTwo">
  <div class="container">
    <div class="row">
      <h1>Mikhail Ladonkin</h1>
      <div class="col-md-6 about">
        <p>
          I am a motivated, confident, positive and adaptive person who has an ability to work under pressure. My communication skills, punctuality, literate speech, ability both to improve my skills and to work in a team are assets I would bring to work. I have
          experience in radio and newspaper journalism which developed my attainments and gave me an opportunity to use my own initiative in public relations. I also have the ability to make right decisions in the stressful situations and be responsible
          for them.
        </p>
      </div>
      <div class="col-md-6 aboutTwo">
        <img class="me" src="https://pp.userapi.com/c836135/v836135719/51a4f/KUfDh65dEY0.jpg" alt="Mikhail-Lad">
      </div>
    </div>
  </div>

  <div class="pageThree text-center" id="pThree">
    <div class="padding-top">
      <h1>What has been achieved so far</h1>
      <h2>It's just the beginning</h2>
    </div>

    <div class="row">
      <div class="col-md-6">
        <p data-height="265" data-theme-id="0" data-slug-hash="aqZQWL" data-default-tab="result" data-user="Mikhail-Lad" data-embed-version="2" data-pen-title="MyPortfolio" class="codepen">See the Pen <a href="https://codepen.io/Mikhail-Lad/pen/aqZQWL/">MyPortfolio</a> by Mikhail (<a href="https://codepen.io/Mikhail-Lad">@Mikhail-Lad</a>) on <a href="https://codepen.io">CodePen</a>.</p>
        <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
        <a href="https://codepen.io/Mikhail-Lad/full/WMwvwm/">
          <h3 class="p3">My Portfolio</h3>
        </a>
      </div>
      <div class="col-md-6">
        <p data-height="265" data-theme-id="0" data-slug-hash="bLdjdW" data-default-tab="result" data-user="Mikhail-Lad" data-embed-version="2" data-pen-title="bLdjdW" class="codepen">See the Pen <a href="https://codepen.io/Mikhail-Lad/pen/bLdjdW/">bLdjdW</a> by Mikhail (<a href="https://codepen.io/Mikhail-Lad">@Mikhail-Lad</a>) on <a href="https://codepen.io">CodePen</a>.</p>
        <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
        <a href="https://codepen.io/Mikhail-Lad/full/bLdjdW">
          <h3>The very first project</h3>
      </div>
    </div>
  </div>
</div>

In both your .pageThree and .pageTwo classes, make sure you are using min-height:500px instead of height:500px.