Alignment issue with Bootstrap footer list on mobile devices?

I'm having an issue with my footer. It displays correctly on desktop, but on mobile it's aligned to the right of the screen instead of centered. Can anyone help me troubleshoot this? Thank you!

    <footer class="footer">
    <div class="container">
      <div class="row">
          <div style="float:none;margin:0 auto;" id="toplist" class="col-md-12 col-xs-3 text-center">
             <ul >
                <a style="color:white;" href="https://example.com/"><li id="first" style="list-style:none;display: inline;">HOME</li></a>
                <a style="color:white;" href="https://example.com/service"><li style="list-style:none;display: inline;padding-left:30px;">SERVICE</li></a>
                <a style="color:white;" href="https://example.com/examples"><li style="list-style:none;display: inline;padding-left:30px;">EXAMPLES</li></a>
                <a style="color:white;" href="https://example.com/order"><li style="list-style:none;display: inline;padding-left:30px;">ORDER</li></a>
                <a style="color:white;" href="https://example.com/contact"><li style="list-style:none;display: inline;padding-left:30px;">CONTACT</li></a>
             </ul>
          </div>
          <div id="hello" class="col-md-12 col-xs-9 text-center">
      © 2017 site.com
          </div>
      </div>
      </div>
    </div>
    </footer>
twitter-bootstrapcsstwitter-bootstrap-3bootstrap-4

Answer №1

Check out the steps below:

For Desktop:

https://i.sstatic.net/IkqRt.png

For Mobile users:

https://i.sstatic.net/T8BRb.png

<footer class="footer">
  <div class="container">
    <div class="row">
      <!--some classes removed-->
      <div style="float:none;margin:0 auto;" id="toplist">
        <ul>
          <a style="color:white;" href="https://example.com/">
            <li id="first" style="list-style:none;display: inline;">HOME</li>
          </a>
          <a style="color:white;" href="https://example.com/service">
            <li style="list-style:none;display: inline;padding-left:30px;">SERVICE</li>
          </a>
          <a style="color:white;" href="https://example.com/examples">
            <li style="list-style:none;display: inline;padding-left:30px;">EXAMPLES</li>
          </a>
          <a style="color:white;" href="https://example.com/order">
            <li style="list-style:none;display: inline;padding-left:30px;">ORDER</li>
          </a>
          <a style="color:white;" href="https://example.com/contact">
            <li style="list-style:none;display: inline;padding-left:30px;">CONTACT</li>
          </a>
        </ul>
      </div>
    </div>
    <!--newly added <div> section-->
    <div class="row">
      <div id="hello" class="col-md-12 col-xs-9 text-center">
        © 2017 site.com
      </div>
      <!--closing </div> tag added-->
    </div>
  </div>
  <!--</div>-->
</footer>

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

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

css

What is the best way to include an external JavaScript file in a Bootstrap project?

I am brand new to front-end development and I'm attempting to create an onClick() function for an element. However, it seems like the js file where the function is located is not being imported properly. I've tried following some instructions to ...

javascripthtmljquerytwitter-bootstrap

Utilizing the input type file within an anchor tag to create a dropdown item

I am facing an issue while trying to incorporate the input type file within a dropdown item inside an anchor tag. Here is the code snippet causing the problem: <div className="dropdown-menu actions-text"> <a className="dropdown-item" href= ...

javascripthtmlcssbootstrap-4

Designing HTML columns to adapt to different screen resolutions

Looking for a clever jQuery or CSS trick to dynamically adjust the number of columns in a website layout based on the size of the viewport. For instance, an iPhone display would have 1 column, while an 800x600 screen would have 2, and a 1024x768 screen wou ...

jqueryhtmlcss

What steps should I take to resolve this animation issue?

My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution ...

htmlcssbootstrap-5

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when c ...

cssreactjsnpmnext.jsreact-calendar

Adapting designs within an Embedded Frame - JQuery

I am dealing with a dialog type popup that appears when a button is clicked by the user. Inside this popup, there is a form that needs to be submitted in order to change the width and height of the popup using the following code: $(document).ready(functio ...

javascriptjqueryhtmlcssiframe

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

javascriptjqueryhtmlcssjquery-ui

CSS loop to centrally align divs

I am facing an issue where I want to center the divs in a panel. Each div is generated within a for-each-loop inside the panel. However, the problem arises when they are displayed as block elements: https://i.sstatic.net/RvnlX.jpg When I try floating them ...

htmlcssprimefaces

Trouble initializing jSignature on multiple pages with jQuery Mobile

My jquery mobile app is displaying 3 jsignature divs correctly on certain pages, but not on others. The problem arises when the div shows up with a squished height and is unresponsive to touch: Currently, I'm loading these divs using a document ready ...

javascriptjqueryhtmlcssjquery-mobile

CSS mysteriously malfunctions on certain iPhones

Key Concept Despite testing with responsive simulators and ensuring there were no issues, some iPhone users have reported problems with the style of my web page. Coding Essentials The page is designed to use 2 custom CSS files - one for screens larger t ...

htmliosiphonecss

jQuery UI's .position() function fails to account for the height of a target element that has been modified using jQuery

Hey there, experts! I have a question regarding my HTML code: <div class="full-height"> <h1>Lorem</h1> </div> Currently, I am using jQuery to set the height of div.full-height dynamically like this: $(document).ready(functio ...

javascriptjqueryhtmlcssjquery-ui

What's the reason this picture isn't displaying in its full size?

I am having trouble adjusting the size of this image to fit the full width, but there seems to be some remaining space on the right side. Category: CSS/HTML /* Header */ .header { background: url('https://picsum.photos/1920/1080') center ...

htmlcssbootstrap-4

Steps for submitting a form using Bootstrap 4

Hi there! I'm struggling to get this form to function properly by sending data to my email address. I have included bootstrap.js, bootstrapjquery.js, and popper.js in my setup. I was hoping to find a solution within this code snippet that allows the ...

javascriptjqueryhtmlcssbootstrap-4

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

javascripthtmlcssangularjsng-class

Center the logo within the NavBar

I'm having trouble centering the logo in my navbar and getting elements to spread out from the logo on both sides. I also want to position the buttons at the end of the navigation bar. Here's the desired layout In my code, I attempted to create ...

htmlcssangularbootstrap-4

What are some ways to incorporate navigation controls into my lightbox gallery?

I've recently implemented a lightbox gallery on my website. The left and right arrows have been added to navigate between images in the gallery. However, I am struggling to make the left arrow go to the previous image and the right arrow to the next o ...

javascriptjqueryhtmlcss

Struggling with the complexity of SASS gradients mixin

After spending over two hours chasing my tail, I'm still struggling to create a cross-browser gradient @mixin. My desired result is: -moz-linear-gradient(left, #fff 0%, #000 100%); Using the default arguments in: @mixin gradient($type:linear, $gra ...

csssassgradient