Inline-block positioning?


#1

I am stuck on the projects.. whether it is creating a nav bar or i'm just trying to get heading and the paragraphs on the line under them too all go on the same line nothing seems to work.

HTML:

<div class="supporting">
  <div class="container">
    <div class="col">
      <h1>Move</h1>
      <p>Become more active by tracking your runs, rides, and walks.</p>
      <h1>SYNC</h1>
      <p>
        Access your activity on your phone, tablet, or computer.</p>
      <h1>COMPETE</h1>
      <p>
        Set personal challenges and see how you rank against your friends.</p>
    </div>

CSS:

/* Supporting */
    .supporting {
      text-align: center;
      padding: 50px 0 80px;
      background-color: #1c1c1c;
    }

    .supporting .col {
      float: left;
      width: 28%;
      padding: 10px;
      display: inline-block;
    }

    .supporting h1,
    .supporting h2 {
      color: #ffa800;
      font-size: 20px;
      margin-bottom: 10px;
    }

    .clearfix {
      clear: both;
    }

    .supporting p {
      color: #efefef;
      margin-bottom: 20px;
      line-height: 20px;
      font-size: 12px;
    }

    .supporting .btn {
      background-color: #eee;
      color: #1c1c1c;
      font-size: 18px;
      padding: 8px 30px;
      text-decoration: none;
      display: inline-block;
    }

#2

Which project is this ?
Can you paste in the URL


#3

https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move


#4

Each set needs to be wrapped in a div class col

like so:

<div class="col">
      <h1>Move</h1>
      <p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="col">
      <h1>SYNC</h1>
      <p>Access your activity on your phone, tablet, or computer.</p>
</div>
<div class="col">
      <h1>COMPETE</h1>
      <p> Set personal challenges and see how you rank against your friends.</p>
    </div>

#5

Thank you, must have missed that, sorry for long reply.


#6

thank you its works but they are not all on the same height, one is lower than the next, can't seem to figure it out. i went back to the lesson where they show you but it doesn't say anything about this :confused: have i missed something again?


#7

Add a width to it so that they all have the same


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.