CODEWITHSUNDEEP
phpcss
Valbone
Valbone

Reputation: 67

Footer refuses to stick at the bottom

I have just recently got into coding, hence the messy code and css (http://codepen.io/valik140795/pen/zBgXRg) . I am currently struggling to position my footer underneath the second grey box with 5 images (instead of being next to it). I have tried countless posts from this website and other sources with no luck. Please help. Thank you in advance.

      .block_footer {
    position: fixed;
    width: 100;
    margin: 0 auto;
    height: 200;
}

Upvotes: 1

Views: 42

Answers (2)

Vcasso
Vcasso

Reputation: 1348

You need to set bottom property of the .block_footer to 0. Then you need to add the appropriate height padding bottom to the body element.

.block_footer {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    bottom: 0;
    text-align: center;
    background: black;
} 

.body {
    padding-bottom: 160px;
}

Upvotes: 0

alanbuchanan
alanbuchanan

Reputation: 4173

Your .block_footer selector is in a media query that targets 100px - 1000px. Remove this selector from the media query if you want it to apply to desktop as well.

Change your numeric width and height values. You are probably looking for pixels. For example 200px instead of 200.

Remove position: fixed and use clear: both. Here is more information on clear.

Codepen example

Upvotes: 2

Related Questions