XF 2.0 Button break in phone view

[Old Nick]

Hello,

I put a button for my visitor can register in a notice as you can see below



But when i go to my page with my iPhone this is what i get:



How can i fix this button breaking ?
Thanks.

 

[Ozzy47]

What is the code you used in the notice?

 

[Old Nick]

Hello ozzy,

this is what i put in the notice settings

<font size="5em">Bienvenue sur les <b>Forums</b> du <b>Sporting Club</b></font><a href="/register" data-xf-click="overlay" data-follow-redirects="on" class="button-register"><i class="fa fa-thumbs-up"></i>&nbsp;Inscrivez-vous !</a>

And this is the custom CSS code for the notice and button

.guests {
    border-radius: 3px;
    background: rgb(249, 250, 250);
    padding: 6px;
    color: rgb(33, 150, 243);
    text-align: center;
    }

.button-register, .button-register:hover {
    font-size: 1.5em;
    color: #fff;
    background: rgb(124, 216, 32);
    border-radius: 2px;
    padding: 7px 10px;
    margin-left: 20px;
    border-color: rgb(124, 216, 32);
    box-shadow: 0 2px 3px rgba(0,0,0,.25);

 

[Ozzy47]

I think @Russ or @Steve F can help with this.

 

[Steve F]

Add white-space: nowrap; and likely a line-height.

 

[Old Nick]

Hello @Steve F this is the result, it's out of the box now.

 

[Ozzy47]

Perhaps change the CSS to this:

.guests {
    border-radius: 3px;
    background: rgb(249, 250, 250);
    padding: 6px;
    color: rgb(33, 150, 243);
    text-align: center;
    }

.button-register, .button-register:hover {
    display: inline-block;
    font-size: 1.5em;
    color: #fff;
    background: rgb(124, 216, 32);
    border-radius: 2px;
    padding: 7px 10px;
    margin-left: 20px;
    border-color: rgb(124, 216, 32);
    box-shadow: 0 2px 3px rgba(0,0,0,.25);
    }

 

[Old Nick]

You are the best ozzy

 

[Ozzy47]

Glad that worked for you.