|
|
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;
| |
− | }
| |
− |
| |
− | }
| |
| | | |
| | | |