|
|
| Line 254: |
Line 254: |
| | } | | } |
| | | | |
| − | footer{
| |
| − | position: fixed;
| |
| − | bottom: 0;
| |
| − | }
| |
| | | | |
| − | @media (max-height:800px){
| |
| − | footer { position: static; }
| |
| − | header { padding-top:40px; }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .footer-distributed{
| |
| − | background-color: #2c292f;
| |
| − | box-sizing: border-box;
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | font: bold 16px sans-serif;
| |
| − | padding: 50px 50px 60px 50px;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-left,
| |
| − | .footer-distributed .footer-center,
| |
| − | .footer-distributed .footer-right{
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − |
| |
| − | /* Footer left */
| |
| − |
| |
| − | .footer-distributed .footer-left{
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed h3{
| |
| − | color: #ffffff;
| |
| − | font: normal 36px 'Cookie', cursive;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | /* The company logo */
| |
| − |
| |
| − | .footer-distributed .footer-left img{
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed h3 span{
| |
| − | color: #e0ac1c;
| |
| − | }
| |
| − |
| |
| − | /* Footer links */
| |
| − |
| |
| − | .footer-distributed .footer-links{
| |
| − | color: #ffffff;
| |
| − | margin: 20px 0 12px;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-links a{
| |
| − | display:inline-block;
| |
| − | line-height: 1.8;
| |
| − | text-decoration: none;
| |
| − | color: inherit;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-company-name{
| |
| − | color: #8f9296;
| |
| − | font-size: 14px;
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − | /* Footer Center */
| |
| − |
| |
| − | .footer-distributed .footer-center{
| |
| − | width: 35%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .footer-distributed .footer-center i{
| |
| − | background-color: #33383b;
| |
| − | color: #ffffff;
| |
| − | font-size: 25px;
| |
| − | width: 38px;
| |
| − | height: 38px;
| |
| − | border-radius: 50%;
| |
| − | text-align: center;
| |
| − | line-height: 42px;
| |
| − | margin: 10px 15px;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-center i.fa-envelope{
| |
| − | font-size: 17px;
| |
| − | line-height: 38px;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-center p{
| |
| − | display: inline-block;
| |
| − | color: #ffffff;
| |
| − | vertical-align: middle;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-center p span{
| |
| − | display:block;
| |
| − | font-weight: normal;
| |
| − | font-size:14px;
| |
| − | line-height:2;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-center p a{
| |
| − | color: #e0ac1c;
| |
| − | text-decoration: none;;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Footer Right */
| |
| − |
| |
| − | .footer-distributed .footer-right{
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-company-about{
| |
| − | line-height: 20px;
| |
| − | color: #92999f;
| |
| − | font-size: 13px;
| |
| − | font-weight: normal;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-company-about span{
| |
| − | display: block;
| |
| − | color: #ffffff;
| |
| − | font-size: 18px;
| |
| − | font-weight: bold;
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-icons{
| |
| − | margin-top: 25px;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-icons a{
| |
| − | display: inline-block;
| |
| − | width: 35px;
| |
| − | height: 35px;
| |
| − | cursor: pointer;
| |
| − | background-color: #33383b;
| |
| − | border-radius: 2px;
| |
| − |
| |
| − | font-size: 20px;
| |
| − | color: #ffffff;
| |
| − | text-align: center;
| |
| − | line-height: 35px;
| |
| − |
| |
| − | margin-right: 3px;
| |
| − | margin-bottom: 5px;
| |
| − | }
| |
| − |
| |
| − | Why this happens?
| |
| − |
| |
| − | img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
| |
| − |
| |
| − | Change the display from inline to other - add display: block for instance
| |
| − |
| |
| − | Change the vertical-align property to top (default is baseline)
| |
| − |
| |
| − | Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
| |
| − |
| |
| − | Example
| |
| − |
| |
| − | Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
| |
| − |
| |
| − | #image-1 img,
| |
| − | #image-2 img,
| |
| − | #image-3 img {
| |
| − | background-color: #00f;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | .image-1,
| |
| − | .image-2,
| |
| − | image-3 {
| |
| − | display: block;
| |
| − | }
| |
| − | .Wrapper {
| |
| − | vertical-align: middle;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /* Here is the code for Responsive Footer */
| |
| − | /* You can remove below code if you don't want Footer to be responsive */
| |
| − |
| |
| − |
| |
| − | @media (max-width: 880px) {
| |
| − |
| |
| − | .footer-distributed .footer-left,
| |
| − | .footer-distributed .footer-center,
| |
| − | .footer-distributed .footer-right{
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | margin-bottom: 40px;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .footer-distributed .footer-center i{
| |
| − | margin-left: 0;
| |
| − | }
| |
| − |
| |
| − | }
| |
| | | | |
| | | | |
