Consistent text alignment across different devices is a work in progress

My footer div has the following code:

.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;

}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
    <div class="center-xy footer-text">
        Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
    </div>
</nav>

The issue is that the footer-text is centered on laptop screens and mobile phones, but it displays as two lines on mobile phones.

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

How can this be resolved?

htmlcssfooter

Answer №1

I'm not completely confident about the code (when I wrote this comment), but it seems there's excessive padding causing the text to wrap even with enough visible space. Therefore...

  • Decrease the padding around the text. OR
  • Add white-space: nowrap; to your text.

Answer №2

To resolve the issue, simply apply the provided CSS code snippet.

.footer-text {
    min-width: 200px;
    text-align: center;
}

By adding this piece of code, the problem will be solved.

For a visual demonstration, refer to the following example:

.footer {
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0;
            background-color: #DDD;
        }
        .center-xy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .footer-text {
            font-family: 'Calibri';
            font-size: 0.8em;

        }
        .footer-text a {
            text-decoration: none;
        }
       .footer-text {
         min-width: 200px;
         text-align: center;
        }
<nav class="footer">
        <div class="center-xy footer-text">
            Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
        </div>
</nav>

Answer №3

Give this a shot:

.footer {
    position: absolute;
    bottom: 0;
    margin:0;
    background-color: #DDD;
    left:0;
    right:0;
    padding:15px 0;
    text-align:center
}
.center-xy {
    /* Add your CSS here */
}
.footer-text {
    font-family: 'Calibri';
    font-size: 0.8em;

}
.footer-text a {
    text-decoration: none;
}
<nav class="footer">
        <div class="center-xy footer-text">
            Made with <span style="color: red; font-size: 1.5em;">&hearts;</span> by <strong><a href="https://www.facebook.com/shantanuandbanerjee" target="_blank">Shantanu Banerjee</a></strong>
        </div>
</nav>

Answer №4

simply utilize

.center-xy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
  }

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

Combine various CSS files

If I have the following HTML structure : <div class="div"> <div class="sub-div"></div> <div class="sub-div"></div> <div class="extra-sub-div"></div> </div> ...

javascripthtmlcssfrontend

Populating divs in an HTML layout using information retrieved from a database

Imagine having an HTML template that looks like this: <template id="template"> <div class="fname"></div> <div class="lname"></div> </template> Now, let's use jQuery/JavaScript to display multiple versions ...

javascriptjqueryhtmlajax

Expand and Collapse Button for Customizing Table Height Individually

I trust everything is going smoothly. A challenge I'm facing involves implementing a button to expand a specific row within a table. Currently, clicking the "show more/show less" button extends all rows when the goal is to do it for each individual ta ...

javascriptcssreactjsfrontend

Increase the height of a component when viewed on mobile devices

https://jsfiddle.net/7v0dyfo3/ This is the concept I am attempting to implement for a listing, albeit without proper styling. While it looks good on most screens, the issue arises with its resizing behavior. I aim for the episode-box div to adapt its heig ...

htmlcsstwitter-bootstrap-3

Tips for avoiding HTML <tags> in the document.write function

I am trying to paint the actual HTML code within a tag using JavaScript but escaping it doesn't seem to be working. function displayHTMLString(n){ document.write("'<table>'"); for (i in range(0,n)){ ...

javascripthtml

Using Multiple Submit Buttons in an HTML form with Express.js and Node.js

I'm currently implementing a like/dislike feature with two buttons on the HTML side. <form method="post" name="ratings"> <input type="submit" name="vote" value="like"> <input type="submit" name="vote" value="dislike"> </f ...

javascripthtmlnode.jsexpress

What are the reasons why Bootstrap icons are not functioning properly in ReactJS?

I am facing an issue with bootstrap icons not working in ReactJS. Click here to view my buttons This is the code for my post items: import React from 'react'; const PostListItem = () => { return ( <li className="app-list ...

javascripthtmlcssreactjsreact-redux

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

javascriptjavahtmljsp

Using Vue JS to display information conditionally within a single component

I currently have a component that dynamically displays the data from an array of objects. However, I want the component to display only one object based on a specific condition. Is it possible to show either one object or another depending on the value o ...

javascripthtmlvue.jsvuejs2

Choose an image to set as the background for your list

I am satisfied with my current lists, but I'm looking to take things to the next level. My idea is to use a background image (at least that's all I've come up with so far) to display each li item on the corresponding line of the image. You c ...

jquerycsslistviewjquery-mobile

Error code (6) occurred during the upload process on the Google Drive website, resulting in

I'm currently working on building a website that allows users to upload files directly to Google Drive from the website itself, but I've encountered numerous challenges in the process. Here's the code snippet I've been using: <!DOCT ...

htmlgoogle-drive-api

What's the best way to add Font Awesome icons to your website - using append

I am facing a situation where I need to customize titles with fontawesome icons. For example: <h2 id="test"><i class="fa fa-cog"></i> THIS IS TITLE</h2> I plan to manually add icons to all titles, but if any title is left empty ( ...

jqueryhtmlappendappendto

What is the best way to reach the assets/public directory from a routed page in Meteor?

I am currently developing a multipage application using Meteor and am facing an issue accessing public assets from a routed page. For instance, when I go to the route http://localhost:3000/editor, I would like to be able to utilize an image from public/im ...

htmlmeteoriron-router

Including React components in my HTML documents

I have developed a node.js server using express and am rendering an html page with jsx code embedded. The server is running smoothly, but I am encountering difficulties when trying to import other jsx components into my html file to utilize them in my main ...

javascripthtmlnode.jsreactjs

The link between language and the concept of home is unbreakable

I am currently working on a website located at www.canal.es/wordpress/ Using qtranslate, the code I have implemented for languages is as follows: <div id="language"> <ul> <li><a href="?lang=es" <?php if (qtrans ...

phpjqueryhtmlajax

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Here is the code snippet I'm working with: HTML: <ion-item-sliding *ngFor="let object of objectList; let idx = index"> <ion-item> <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Nam ...

htmlangulartypescriptindexingngfor

JavaScript appending checkboxes to a list not functioning as expected

I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...

javascripthtmljquery-mobilecheckboxdhtml

What is the method to launch a YouTube embedded video in a new tab?

I have a YouTube video embedded on my website. I've been trying to figure out how to open it in a new tab, but haven't been successful. Can someone help me with this issue? Here is the code I'm using: <a href="https://www.youtube.com/ ...

javascriptjqueryhtmlcss

Guide to adding a label following an input field in a Formik (Input) form using React.js

I am looking to customize the label text for the Formik Input Component, specifically positioning it after the input field. However, I am unsure of how to target it and apply CSS styling. Here is a code snippet example: <div className="editable-jo ...

cssreactjsinputlabelformik

Locate the XPath for text that is within a div tag and adjacent to a span tag

I've searched, but couldn't find an exact match, so my question is about a low HTML code: <div class="column1"> <div> <div class="name"> Dynamic Name <span class="id" title="ID">Dynamic ID</span> </div> </d ...

htmlcssxpathselenium-webdriverdomxpath