CODEWITHSUNDEEP
javascripthtmlcssstylesfooter
Vivek roy
Vivek roy

Reputation: 79

how to adjust footer position html css

footer {
    background-color: #000000
}

.footer-nav {
    list-style: none;
    
}

.footer-nav li {
    display: inline-block;
    margin: 15px;
    font-weight: 400;
    font-size: 80%
    
}

.social {
    list-style: none;
}

.social li {
    display: inline-block;
    margin: 15px;
    float: right;
    font-size: 150%
}

.footer-nav li a,
.social li a {
    text-decoration: none;
}

.footer-nav li a:link,
.footer-nav li a:visited {
    color: #4b4b4b;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #9d9c9c;
}


.social li:first-child {
    margin-right: 0;
}

.social li a,
.social li a {
    text-decoration: none;
}

.social li a:link,
.social li a:visited {
    color: #4b4b4b;
}

.ion-logo-youtube:hover,
.ion-logo-youtube:active {
    color: #FF0000;
}

.ion-logo-facebook:hover,
.ion-logo-facebook:active {
    color: #3B5998;
}
.ion-logo-instagram:hover,
.ion-logo-instagram:active {
    color: #fb3958;
}
.ion-logo-github:hover,
.ion-logo-github:active {
    color: #8d8d8d;
}


.copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 10px;
    font-size: 80%;
   
    
}

.copy h2 {
    word-spacing: 4px;
    padding-bottom: 10px;
    font-size: 80%;
    padding-top: 20px;
    border-width: thick 
}

.copy i {
    color: red;
}

.love {
    margin-bottom: 5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Vendor/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="Vendor/css/grid.css">
  <link rel="stylesheet" type="text/css" href="vendor/css/generic.css" />
  <link rel="stylesheet" type="text/css" href="vendor/css/style.css" />
  <link rel="stylesheet" type="text/css" href="Resources/css/styles.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css">
  <link rel="stylesheet" type="text/css" href="vendor/css/js-image-slider.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css">
  <title>Homepage</title>
  <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
  <link rel="manifest" href="/resources/favicons/site.webmanifest">
  <link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="/resources/favicons/favicon.ico">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
</head>

<body>
  <header>
  </header>
  <footer>
    <div class="row">
      <div class="col span-1-of-2">
        <ul class="footer-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Our blog</a></li>
          <li><a href="#">Reach us</a></li>
        </ul>
      </div>
      <div class="col span-1-of-2">
        <ul class="social">
          <li><a href="#"><i class="icon ion-logo-youtube"></i></a></li>
          <li><a href="https://mbasic.facebook.com/pawankumar.gupta.712" target="_blank"><i class="icon ion-logo-facebook"></i></a></li>
          <li><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
          <li><a href="#"><i class="icon ion-logo-github"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="row copy">
      <p class="love">
        Made with &nbsp; <i class="icon ion-md-heart"></i>
      </p>
      <h2>
        Copyright &copy; 2018 by Noobalert. All right reserved.
      </h2>
    </div>
  </footer>
</body>

footer {
    background-color: #000000
}

.footer-nav {
    list-style: none;
    
}

.footer-nav li {
    display: inline-block;
    margin: 15px;
    font-weight: 400;
    font-size: 80%
    
}

.social {
    list-style: none;
}

.social li {
    display: inline-block;
    margin: 15px;
    float: right;
    font-size: 150%
}

.footer-nav li a,
.social li a {
    text-decoration: none;
}

.footer-nav li a:link,
.footer-nav li a:visited {
    color: #4b4b4b;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #9d9c9c;
}


.social li:first-child {
    margin-right: 0;
}

.social li a,
.social li a {
    text-decoration: none;
}

.social li a:link,
.social li a:visited {
    color: #4b4b4b;
}

.ion-logo-youtube:hover,
.ion-logo-youtube:active {
    color: #FF0000;
}

.ion-logo-facebook:hover,
.ion-logo-facebook:active {
    color: #3B5998;
}
.ion-logo-instagram:hover,
.ion-logo-instagram:active {
    color: #fb3958;
}
.ion-logo-github:hover,
.ion-logo-github:active {
    color: #8d8d8d;
}


.copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 10px;
    font-size: 80%;
   
    
}

.copy h2 {
    word-spacing: 4px;
    padding-bottom: 10px;
    font-size: 80%;
    padding-top: 20px;
    border-width: thick 
}

.copy i {
    color: red;
}

.love {
    margin-bottom: 5px;
}
 <footer>
    <div class="row">
      <div class="col span-1-of-2">
        <ul class="footer-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Our blog</a></li>
          <li><a href="#">Reach us</a></li>
        </ul>
      </div>
      <div class="col span-1-of-2">
        <ul class="social">
          <li><a href="#"><i class="icon ion-logo-youtube"></i></a></li>
          <li><a href="https://mbasic.facebook.com/pawankumar.gupta.712" target="_blank"><i class="icon ion-logo-facebook"></i></a></li>
          <li><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="row copy">
      <p class="love">
        Made with &nbsp; <i class="icon ion-md-heart"></i>
      </p>
      <h2>
        Copyright &copy; 2018. All right reserved.
      </h2>
    </div>
  </footer>

problem

why i am not getting footer to the lowest side of the page... it gives background color at bottom.... how can i fix that issue in my code. i managed to do some possible solutions but i failed so i am asking here to great minds.i am very new to html css so ill be thankfull for every answer. thanks in advance..... ;)

Upvotes: 2

Views: 62

Answers (2)

Naser.Sadeghi
Naser.Sadeghi

Reputation: 1302

Welcome to stack overflow Vivek, If your problem is the white space between the footer and the bottom of the page, you can fix it using a CSS Reset Code.

By default, some web browsers add automatic margins, padding, etc to some HTML elements. In order to remove these automatic stylings you could use some piece of code like below which is called CSS RESET Code inside your style.css file:

* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Upvotes: 1

user8971373
user8971373

Reputation:

You can simpy add this CSS to your code:

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Upvotes: 0

Related Questions