Project Junction

Projects
1

In project “Junction”, when working in the .supporting div, I’m having a hard time matching the demo site. When I do an inspect element on the demo site the following code exists for the css:


.supporting .col-md-4 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

When I use that in the editor none of the attributes take on those properties. However, if I move the color and text-align attributes to only the .supporting class, they work. What is it about using .supporting and .col-md-4 together in the the editor that prevents it from working, even though that is what was used on the demo version of the site as shown by inspecting the element?

Thanks for any help!

2

I think you need to delete the space in between .supporting and .col-md-4 to make it work. Here’s a website that could help you figure it out…https://css-tricks.com/multiple-class-id-selectors/Hope it helps!:slight_smile:

3

Fuzzball,

Thanks for the tip. Unfortunately, that didn’t work either. :frowning:

4

Hi @rsoricelli ,

Have you managed to solve this or do you still need help ?
I don’t really understand what the problem is can you please explain and paste in all of your HTML & CSS…

Thanks

5

Thanks for checking on this. The following is how I had to do my html and css to get it to work. However, you’ll notice that if you inspect the elements on the provided demo site and compare to my code, they do do not match. I had to change where I place some of the attributes or the design would not respond correctly.

HTML


  <body>
    <div class="header">
      <div class="container">
      	<div class="row">
          <img class="logo" src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg">
          <ul class="nav">
            <li>About</li>
            <li>Blog</li>
            <li>Help</li>
            <li>Contact</li>
          </ul>
        </div>
      </div>
    </div>


    <div class="jumbotron">
      <div class="container">
        <h1>Meet Junction</h1>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="row">
          <div col-md-4>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg" height="128" width="128">
            <h2>Read</h2>
            <p>Discover new stories and follow your favorite writers.</p>
          </div>
          <div col-md-4>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg" height="128" width="128">
            <h2>Write</h2>
            <p>Create stories about our world, or entirely new worlds.</p>
          </div>
          <div col-md-4>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg" height="128" width="128">
            <h2>Talk</h2>
            <p>Join the conversation by talking with your favorite writers and your fans.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="download">
      <div class="container">
        <a href="#" class="btn btn-default">Join</a>
      </div>
    </div>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
}

body {
  background: url('https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg') no-repeat, center, center;
  background-size: cover;
}

.container {
  max-width:940px;
}

/* Header */
.header {
  padding: 10px 0;
  background: rgba(0,0,0,0.5);
}

.logo {
  width: 36px;
  height: 36px;
  margin: 0 30px 0;
}

.nav {
  display: inline-block;
  list-style-type: none;
  padding: 8px 0;
  color: #fff;
}

.nav li {
  display: inline;
  padding: 0 0 5px;
  margin-right: 30px;
}

/* Jumbotron */
.jumbotron {
  position: relative;
  top: 50px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  background-color: transparent;
  text-align: center;
  margin-bottom: 30px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 60px;
}

/* Supporting */
.supporting {
  margin-top: 40px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
}

.supporting h2 {
  font-size: 25px;
}

.supporting p {
  font-size: 16px;
  margin-bottom: 40px;
}

.supporting.col-md-4 {
  /* removed code from here and placed in .supporting and .supportin p, waiting for reply from forums */
}

/* Download */
.download {
	position: relative;
  top: 80;
  text-align: center;
}

.download .btn-default {
  background: rgba(0, 255, 188, 0.5);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1.3px;
  padding: 10px 60px;
  margin-bottom: 100px;
}

.download .btn-default:hover {
	background: rgba(0,0,0,0.5);
}

Thanks again for helping.

6

Revert this back to how you had it…

The problem is in the HTML

^This is the problem for all you have: <div col-md-4> col-md-4 is a class it should be like this:

<div class="col-md-4">
7

OMG! I can’t believe it. That’s worse than forgetting a semi-colon in JS. :blush:
Lol. Thanks!

1 Like