I have a footer div with this code

```css
.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;
}
```

```html
<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 problem is the `footer-text` is well centered in Laptop Screens and mobile phones. But on Mobile Phones the text comes in 2-lines.

[![enter image description here](https://i.stack.imgur.com/NhSyn.png)](https://i.stack.imgur.com/NhSyn.png)

What is the solution?