Codepen isn't displaying my code as it seemingly should

1

Hi everyone, I’m new here. I’m currently working on the first project- building a tribute page. I built my project in notepad ++ using bootstrap 4, then copied and pasted the code (the entire body into the html section, and all the css into the css section) over into codepen. However when I click run, my tribute page isn’t displaying as it does when I run it from notepad++. I’ve made sure that bootstrap 4 is working on my codepen, so I’m really at a loss as to why it’s not displaying as expected. I want the #left column, which consists of the text “Carl Sagan”, a picture, and an embedded youtube video, to be in a fixed position on the left, while the right column, which consists of text, should be on the right. Major thanks to anyone who’s able to help me out. There’s a media query in there too.

2

You may want to use “z-index”.

    #left {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 99999;
    }
3

Thank you so much, I’ll try that :slight_smile:

1 Like
4

I’ve tried adding the z-index, but it’s still not displaying correctly. I’ve got a media query to fix the left colum in a fixed position , so that it doesn’t move while the right column scrolls, for viewports with a width of min. 576px. It runs fine on chrome, but from codepen it’s not quite right. Anyone have any idea why this could be?

5

By the way…you don’t add scripts in JS… <script> is a HTML tag.

image
image1063×464 136 KB

6 
body {
background: radial-gradient(#f2f2f2 0%, #d6d6d6 100%)
}

h1 {
text-align:center;
margin-top:25px;
margin-bottom:25px;
}
img {
  display: block;
  margin: 0 auto;
}

That’s all the CSS and its working pretty good for me…if that’s not what you want. Maybe a little sketch will help.

7

You’re right, seems I didn’t even need the media query… I have no idea how, but I seem to have tricked myself into thinking that it was needed, and the fact that it was displaying differently on code pen to how it does when I open it on chrome or IE on my laptop threw me off… Anyway, thank you so much for your help. I was starting to go a little crazy! :joy:

1 Like