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.
You may want to use “z-index”.
#left {
position: fixed;
top: 0;
bottom: 0;
z-index: 99999;
}
Thank you so much, I’ll try that
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?
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.
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!