My portfolio looks different in codepen

My portfolio looks different in codepen
0

#1

Hey everyone,

I’m doing the portfolio project from a tutorial I found, which I’m going to customize afterward. Before I actually start doing that, I wanna make sure it works. It does in Chrome and Mozilla, but when I put it into Codepen, the text underneath my icons doesn’t show up. It’s like the marketing class div gets shorter in height and hides some content. On mobile, the last icon is cut off too. How can I make it a fixed height so that all of the content is shown in every devide/browser? I linked jQuery and Bootstrap “the codepen way” (in settings), by the way, and it’s still not working.

Here’s my pen:

I appreciate any help!

EDIT: added screenshots


#2

From all the icons? Does this happen on a wide screen (pc) or smaller screen like a mobile device? Can you show a screenshot of how it looks when not on Codepen (mobile vs desktop views would be great)?


#3

I just added screenshots. Thanks for replying!


#4

Try making the following changes to the classes listed below:

html, body {
  height: 100%;
}

.marketing {
  margin: 60px auto;
  padding: 60px auto;
  margin-bottom: -160px;
}

footer {
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background: #444;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 40px 0;
}

and adding this:

.marketing:after {
  content: "";
  display: block;
  height: 160px;
}

#5

It worked! :slight_smile: Thank you so much!!