CSS Grid and Personal Portfolio page

I’m working on the Portfolio page. I’m using Grid for displaying thumbnails of my projects. Looks ok and is responsive.

But when I go to put in icons and links for the contact me portion, it all stops working. I pulled just that section of html and css out so there shouldn’t be any thing affecting the css from another section. I’ve played around adding borders and background colors so I can see what’s “working” and what’s not.

I’d appreciate another set of eyes. Here are the html and the css. I’ll put a link to the entire page at the end if it helps to look at the whole thing. Thanks!

<section id="ContactMe">

  <h2>Contact Me</h2>

  <div class="ContactMe-container">

  <div class="ContactMethod">
      <a href="#" target="_blank"><i class="fab fa-github"></i></a>
    </div>

    <div class="ContactMethod">
      <a href="#" target="_blank"><i class="fab fa-free-code-camp"></i></a>
    </div>

    </div>
    <div class="ContactMethod">
      <a href="#" target="_blank"><i class="fas fa-envelope-square"></i></a>
    </div>

    <div class="ContactMethod">
      <a href="#" target="_blank"><i class="fas fa-phone-volume"></i></a>
    </div>
</section>

</body>
</html>

and the .css

#ContactMe {
  height: 20%;
  background-color: green;
}

.ContactMe-container {
  background-color: cyan;
  display: grid;
    grid-template-columns: 200px 200px 200px;
    /* grid-template-rows:  100px 100px;  */
    grid-gap: 10px;
}

.ContactMethod {
  border: 1px solid black;
  /* width: 100px;  */
  /* height: 100px;
  /* text-align: center; */ 
  /* font-size: 3em; */
/*  background-color: white; */
  /* grid-area: content; */
  }

i {font-size: 4em; }

the link to the whole at pen.io is https://codepen.io/JohnPomeroy/pen/mjWPXK

Thanks again.

need some more info, what do you mean by ‘it all stops working’?
If you can point to something specific (or show a screen shot highlighting in it the problem) that would be helpful.
Right now I’m looking at your pen and I have no clue where to start…

I’m trying to get four images (from font-awesome.com) showing ways to contact me to line up horizontally on one line inside, for testing purposes, a cyan div which is then inside a green div. (I just realized my .ContactMe-container rule is set up for 3 across but I don’t think that’s my problem).

Here is a screen shot showing how the ContactMe icons are displaying using the sample code above.

The envelope is supposed to be on the same line as the other two icons and the phone on the next line (The phone will be moved up later, too,. but with the code I supplied, it’s on a second line)

I took the working code that displayed screen shots from the portfolio page, copy/pasted it and renamed the various classes and IDs in both html and css. It didn’t work the same.

Thanks.

i’m excited to say I think I see the problem!

cut and paste this section over-top your code

    <section id="ContactMe">

      <h2>Contact Me</h2>

      <div class="ContactMe-container">

        <div class="ContactMethod1" id="github">
          <a href="#" target="_blank"><i class="fab fa-github"></i></a>
        </div>

        <div class="ContactMethod1" id="codecamp">
          <a href="#" target="_blank"><i class="fab fa-free-code-camp"></i></a>
        </div>

      
      <div class="ContactMethod1" id="envelope">
        <a href="#" target="_blank"><i class="fas fa-envelope-square"></i></a>
      </div>

      <div class="ContactMethod1" id="phone">
        <a href="#" target="_blank"><i class="fas fa-phone-volume"></i></a>
      </div>
      </div>
    </section>

You had a closing div for the section in the wrong place!

Thank you!

That seems to have been it. A reformat the page would have helped me, but I was spending all my time looking at the css!

Thanks again.

1 Like