Issue with portfolio page padding

1

Hi,

I’m having difficulty creating a padding that scrolls all the way down. I have tried to do it but I can’t seem to get it right.
An example of what I’m trying to recreate: https://codepen.io/swoosley/pen/wGppYb

The portfolio page that I’m working on can be found here: https://codepen.io/peterde/pen/GvrGaL.

Should I maybe use some of the bootstrap template at all.

Thanks in advance for any assistance.

2

First of all CodePen treat the HTML section as if it was the body, so all this section can be removed/moved to the head section (under settings - html)

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content"width=device-width, initial-scale=1.0">
<title>Peter's portfolio page</title>
<link href="https://fonts.googleapis.com/css?family=Caveat|Open-Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">

Second what exactly do you mean with creating a padding that scrolls all the way down?
The example page you gave has more content so you see the elements going below the view.
Plus s/he wrapped everything inside a bootstrap row.

If you want an element to be always at the bottom of the page a simple

position: fixed;
bottom: 0;

in CSS will always place the element at the end of the page.

Hope it helps :slight_smile:

3

we’re just going to guess what this means til you rephrase this (:
am guessing that what you want is for the <div class="sample-projects"></div> to hit the bottom of the screen, you can do that by removing

.sample-projects {margin: 100px;}