David David - 6 months ago 11
HTML Question

center my footer divs

Hello I need help centering my footer divs (.footer-top). Basically I need the 'cottons story and contact' to sit in the middle all the time and not on the left.

Original

Modified



.footer-container {
padding-top: 35px;
position: relative;
z-index: 1;
line-height: 24px;
}
.footer-container .footer-top h3.module-title{

text-transform: uppercase;

font-size: 20px;
font-weight: 500;
margin: 0;
padding: 15px 0 40px;
letter-spacing: 1px;
font-family: 'Bell Gothic Blk';

}
.footer-container .footer-top h3.module-title:before{
content: "";
height: 1px;
width: 60px;
background: #464646;
position: absolute;
top: 45px;
}
.footer-container .footer-top h3.module-title ul li a{
line-height:1px;
}

.footer-container .images{
text-align: center;

}
.footer-container .icon{
margin: 45px 0 25px;
text-align: center;
}
.footer-container ul.content{
margin-bottom: 0;
}


.footer-container div.content{
max-width: 750px;
font-size: 1.083em;
margin: 0 ;


text-align: left;

}

.footer-top{padding:10px 0 0 0; }
.footer-container .footer-top .content{
padding: 0
}
.footer-container .footer-top a{ transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s;font-size:16px; }
.footer-container .footer-top a:hover{ text-decoration: none;}
.footer-item-body i{font-size:20px;}
.footer-container .footer-top .newsletter { padding: 0 15px;margin-bottom:30px;}
.footer-container .footer-top .newsletter .content{text-align:left;}
.footer-item-body .ft-line {color: #666666; padding-bottom: 5px;padding-left: 45px;text-align: left;}
.footer-item-body .ft-line i { color: #666666;float: left; margin-left: -40px; width: 40px;}

.footer-container .footer-top .newsletter .small-title{ margin-bottom: 20px;font-style:initial;font-weight:400;}

.footer-container .footer-top .newsletter .input-group-field{
background: #ffffff;color: #c2c2c2; padding-left: 10px;margin: 0;border: 2px solid #ebebeb;
width:100%;
font-weight:normal;
font-size:16px;
text-transform: capitalize;
height: 37px;

display:table-cell;
}



.footer-container .footer-bottom address{font-size: 16px; padding: 5px 0 5px 0; text-align: center; text-transform: capitalize;font-weight:300;}

.footer-container .footer-top ul li {
margin-bottom: 15px;
text-align:left;
font-size: 16px;
font-style:initial;

}
.footer-container .footer-top .content p{
font-size: 16px;
font-style: normal;
text-align: left;
padding: 0px 0 15px 0;

}
.contact-links li i{padding-right:20px; color: #cccccc;}
.button-about{
text-align:left;
}
.button-about a, .content-blog .list-blog .button a{




text-transform: uppercase;
font-weight: 300;


}

.button-about a i{margin-left:10px;}
.footer-icon-share{
overflow:hidden;
}
.footer-icon-share ul li{
width:35px;
height:35px;
float:left;
margin-right:10px;


}


.footer-icon-share ul li{
position:relative!important;
}
.footer-icon-share ul li a{
font-size:15px;
position: absolute;
top: 7px;
left: 10px;
}
.paypal-images{
overflow:hidden;
}
.paypal-images ul li{
float:left;
margin-right:10px;

}

{% if settings.enable_footer_Top %}
<div class="images">
{{ 'logo_footer_top.png' | asset_url | img_tag }}
</div>

<div class="icon">
{{ 'footer_icon_top.png' | asset_url | img_tag }}
</div>

{% if settings.footer_top_content != blank %}
<div class="content" >
{{ settings.footer_top_content }}
</div>
{% endif %}
{% endif %}





Please see website:

https://cottonsaus.myshopify.com/collections/cottons-products

Answer

you need to add col-md-2 col-sm-2 col-xs-12 col-sm-push-4 in footer top columns to make it center