I created a footer using Bootstrap 4 that is perfectly centered on the desktop version but unfortunately appears off-center on mobile devices

.footer_img{

padding-left: 30px;
width:170px;
height:63px;
align-self: center;
}

.footer{
margin-bottom: 41px;
}
<div class="footer container">

<div class="clearfix">
<span class="float-left"><a href="#"><img class="footer_img" src="images/logo.png"></a></span>
<span class="float-right">&copy; XYZABC Inc and Affiliates.All Rights Reserved</span>
</div>

</div>

In the full desktop version, the footer looks fine but when switching to a mobile view, I noticed that the logo and company name were not centered properly. My attempt at creating the footer was with Bootstrap 4, although as a newcomer to it, I may have missed something. Can anyone provide guidance on how to achieve this? Screenshots of the issue are attached below.

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

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

In order to achieve the desired outcome, kindly incorporate these lines of code into your CSS file:

@media only screen and (max-width:640px){
   .footer{text-align:center;}
   .footer .float-left,
   .footer .float-right{float:none;display:inline-block;clear:both;width:100%;}    
}

Feel free to adjust the max-width value as per your specific requirements. This will be effective for screens with a width less than or equal to the specified value (e.g. mobile screens).

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

What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell. Below is my current progr ...

htmlcss

How is it possible for my search results page to retrieve the words I input?

Currently, I am in the process of creating the search result page and I plan to utilize dynamic routing for implementation. Here is a snippet of my search bar code: <Link href={`/productSearchResult/${searchWord}`}> <a className={styles.navbar_s ...

javascripthtmlreactjsnext.jsdynamic-routing

The measure of the leaflet map's vertical dimension in a Shiny module application

I'm facing an issue while trying to incorporate my small app as a module within my larger app. Everything seems to be working fine except for the height of the leaflet map. In the standalone app, I had: ui <- fluidPage( tags$style(type = "te ...

cssshinymoduleleafletheight

Ways to halt a CSS animation when it reaches the screen boundary

I put together this demo: By clicking, a red box falls down. The issue arises when trying to determine the screen size using only CSS. In my demo, I set the box to fall for 1000px regardless of the actual screen height. Here is the keyframe code snippet ...

javascriptjquerycssanimation

What is the alternative to using echo when outputting HTML?

I am working on a function... $post_text .= '<div style="font-size: 15px; color: blueviolet">'; $post_text .= "<br>"; $post_text .= 'Text number 1.'; $post_text .= "<br>"; $post_text .= 'Text number 2.'; $po ...

phphtmlreturnecho

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

javascriptcssmath

PHP seems to be malfunctioning and causing issues with the session

I'm facing an issue with my PHP session. The login page is functioning correctly, but once I redirect to the home page, my login details are not being displayed. An error is being thrown: Notice : Undefined index: username in C:\xampp\htdocs ...

javascriptphphtmlcsslaravel

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

Greetings! I am currently learning how to implement AJAX with jQuery to load an HTML document into a div element within another HTML document. Here is the approach I am using: function pageload() { $.ajax({ url: 'Marker.aspx', ...

javascripthtmljquery

Django authentication ensures secure access for users on

What could be causing the issue with self.request.user.is_authenticated() not functioning correctly in this specific view? class ArticleDetailView(DetailView, CategoryListMixin): model = Article template_name = 'mainapp/article_detail.html&ap ...

pythonhtmlcssdjango

Angular - Ensuring correct rendering of a subcomponent with input parameter on the first update

Here is a snippet of code showcasing a list of educations and a component: <cdk-virtual-scroll-viewport itemSize="5" class="list-scroll"> <app-education-item *ngFor="let education of loadedEducations" ...

htmlangulartypescriptdata-bindingfrontend

Issues with NgFor directive not functioning properly within a Bootstrap class in Angular 6

In my Angular project, I have successfully implemented a REST service. The film data is displayed as a JSON object below the image. However, I am facing an issue with printing the results inside the boxes using ngIf. Strangely, it works fine with ngFor exc ...

angularbootstrap-4ngforangular-bootstrapangular-ng-if

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

javascripthtml

PHP sending only a single space in an email

My HTML form works perfectly fine, except for one field! The issue arises with a particular text field that I fill out using a button and a short JavaScript function. Could this be causing a conflict with the PHP code? The problematic text field is: inpu ...

javascriptphphtml

Creating a responsive card layout in Bootstrap 4 that utilizes the vertical space of the viewport with a scrollbar

We are working on a page that has specific requirements: The page should not have a scroll bar. The card must expand vertically to fill the remaining space, even if there is no content in the card-body. We need a scroll bar for the card-body only when the ...

htmlcssbootstrap-4

Updating Angular components manually involves making direct changes to the component code,

Whenever I refresh a component in my Angular application implemented with version 17, the URL 'localhost:4200/(path)' reverts back to 'localhost:4200'. Interestingly, this behavior is consistent across three components except for the Ho ...

htmlcssangulartypescript

Execute a function when the button is clicked

Currently in the process of learning HTML and Javascript. I was able to search online for information on how to navigate to a URL and extract a value from returned JSONP. However, the function is executing when I load the HTML page, and I would prefer it t ...

javascripthtml

Ensure that the click event is triggered only once for each distinct class

Is there a way to make a click event trigger on any element with the same class just once? I attempted using '.one', however, it removes itself after the first element with the class is clicked. $(document).ready(function() { $(".dro ...

javascriptphphtmljqueryajax

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

cssangularjs

The React canvas within a CSS grid is not taking up the entire space

I'm currently developing a line plotter in React. This "line plotter" needs to be contained within a CSS grid item. I am utilizing the <canvas> element to draw the lines, but I'm unsure if this is the best approach. Is there a more efficien ...

javascripthtmlcssreactjscanvas

Repositioning a div element within a different parent div

Is there a way to transfer the contents of one div to another using Javascript? I am looking to move the contents of .sidebar from .post to .carousel. Can someone provide guidance on how to achieve this using Javascript? I aim to transform the structure ...

javascriptjquerycss