Place my footer sections in the center

Hello, I am seeking assistance in properly centering the footer divs (.footer-top). Specifically, I want the 'Cottons story and contact' section to always be centered and not aligned to the left.

https://i.sstatic.net/ihAF2.jpg

https://i.sstatic.net/2JOo2.jpg

.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 %}

For further details, please visit the following website:

htmlcss

Answer №1

To center the columns in the "footer top" section, you should include the classes 

col-md-2 col-sm-2 col-xs-12 col-sm-push-4
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing users from inputting the same number more than once

Here are a series of text input fields pertaining to a single question: <input type="text" name="{{ $answer->id }}" value="" style="width:20px; text-align:center" maxlength="1" oninput="this.value=this.value.replace(/[^0-5]/g,'');" /> & ...

javascripthtml

How can I trigger a function or automate code execution in Angular?

I have some code within a function that is crucial for initializing other variables. The issue I am facing is that this function does not execute unless it is called through another tag in the HTML. Is there a method to automatically initialize this func ...

htmlangular

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...

csscss-position

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

The image slideshow on W3 Schools displays images in a stacked formation

Utilizing this code snippet from W3 Schools to incorporate an image slideshow into my web project. However, upon page load/reload, the images appear stacked vertically rather than horizontally (one above and one below). The slideshow functions properly aft ...

javascripthtmlcss

Incorporating a View into a Sidebar in CakePHP

I'm currently facing some challenges understanding the concepts of CakePHP's views, blocks, and layouts. My goal is to have a left and right sidebar displayed on every page, with content that may vary. Right now, I have the right sidebar set up ...

phphtmlcakephpviewsidebar

Utilize Python to extract search results from The New York Times website

Looking to scrape search results from NYTimes. To begin, the scraping process starts with: url = "http://query.nytimes.com/search/sitesearch/?action=click&contentCollection&region=TopBar&WT.nav=searchWidget&module=SearchSubmit&pgtype=H ...

pythonhtmlweb-scraping

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document

[ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] Hello there! The function getArray() in the code snippet above is returning the specified string ↑. I need help connecting this data w ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Arrangement of multiple boxes in a single row using HTML code

Struggling to solve this supposedly simple problem, I'm reaching out for help. I need assistance in arranging multiple inputs with corresponding labels, all stacked horizontally on a single line as shown in the image. ...

csshtml

How to Implement Dotted Line Styling for Row Data in ReactJS with CSS?

I'm working on a condensed design with Reactjs Monday......................08:00 AM - 21:00 PM I have a lot of dots in the display above. How can I make it shorter without using so many dots? Entering numerous dots like this is not ideal for the webs ...

cssreactjs

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

javascriptjqueryhtmlcss

Issue with a hidden div, problem with scrolling, a div overlapping other divs

I'm feeling a bit lost here, trying to figure out what went wrong. It seems like a simple mistake, but I can't pinpoint it. Currently, I'm just testing everything out for a mobile website template. Hopefully, that information helps. For any ...

javascriptjqueryhtmlcss

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

javascripthtmljson

Display only the initial word in a hidden input value of an HTML document using NodeJS Express

I have a Node.js application that utilizes EJS as its template engine. On multiple pages, I incorporate hidden inputs and retrieve their values using req.body. Although my body parser in Express is configured correctly, I've noticed an issue where hid ...

htmlnode.jsexpresshidden-field

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

My Ajax request does not seem to function properly when attempting to transfer data to a different

Take a look at the following code snippet: <div class="category" id="<?php echo $cat->term_id; ?>"><?php echo $cat->cat_name; ?> </div> $(".category").click(function(){ var categ = $(this).attr('id&apos ...

phpjqueryhtmlajax

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

javascriptphphtmlcsswordpress

The hyperlink tag within the overlay div is unresponsive

I'm facing an issue with my overlay div (rb-overlay) that pops up when users click on a page option. The overlay takes up the entire page and includes a close button in the top right corner. However, I've noticed that the link at the end of the t ...

javascriptjqueryhtmlanchoroverlay

What is the best way to arrange form inputs in a single row?

My form consists of three input boxes. While the first two inputs are single line, the third is a description field with 10 rows set as default. However, for some reason, this third box is not aligned properly with the other two. Please refer to the screen ...

htmlcss

Clear function of signature pad not working inside Bootstrap modal dialogue box

Currently, I'm working on implementing a signature pad dialogue box using Bootstrap modal. When the user clicks on the "Complete Activity" button, a dialog box should pop up with options for yes or no. If the user selects yes, another dialog box shoul ...

htmlangulartypescriptbootstrap-modal