Develop Reference

Fixed footer in viewport using bootstrap/jQuery

I'm trying to replicate the effect of the footer from this website:
http://www.terradatbroker.com
In essence what it does is like the image at the top, the image stays fixed while the viewport of the div or section scrolls. I'd like the same with a div or footer block filled with content so that when reaching the footer, the lower part of the footer is revealed first, letting the content div slide upward while scrolling down. I hope this describes it clearly.
Here's what I've got so far:
HTML snippet:
<div class="row content-filler">
Content 1
</div>
<footer>
<div class="footer">
<h1 class="">Footer</h1>
</div>
</footer>
CSS snippet:
footer {
background-color: #444;
min-height: 350px;
color: #fff;
margin: 0px;
padding: 0px;
z-index: 1;
}
.footer {
margin: 0px;
padding: 0px;
background-color: #444;
position:fixed;
top: 800px;
z-index: 1;
}
Here's a jsfiddle with the full source code:
https://jsfiddle.net/DTcHh/39204/
I've searched many bootstrap themes but I couldn't find one that does this effect. I've also looked at the css but I suspect it may be done using javascript, which is minified and unreadable. Can anyone shed some light on how this is done?

Check this https://jsfiddle.net/DTcHh/39205/
Footer is fixed with bottom:0
The last div.row has a margin-bottom, for give space to the footer.
Hope it helps, cheers.

Why isn't my text responsive on a mobile device view?

I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE

white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.

.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.

Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!

Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;

In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->

I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

whitespace: nowrap for photo has issue when resize

I tried to display my photos horizontally, so i used
.stream {
white-space: nowrap;
}
.mod-pic {
padding-left: 5px;
}
.modelstream {
display: inline-block;
max-height: 90%;
width: auto;
}
for my photo's css
html looks like this: (I used javascript to render the photos)
<div class="stream">
<div class="alexContainer"></div>
<div class="template main alexTemplate">
<div class="mod-pic">
<img class="pic modelstream" src="" alt=""/>
</div>
</div>
</div>
The problem is when I resize the browser, the margin of the photo become too big, although
I want the photo to be responsive, but I don't want the margin between photo become too
big.
Can anyone help me to fix this problem? I would really appreciate it!
Thanks

It looks to me like your container div/divs are becoming too wide when the window is re-sized. I think using CSS to set the max-width on one or more of the outer divs would solve your problem.

Stellar.js background attachment set to fixed but crazy jitter still happening

As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?

The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.

Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.

try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}

I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.