Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:

Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

make them slightly transparent slightly round corners obvious a message by appearing from the top and not being glued to the top of the app

How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}

And the end result is....

Much better in my opinion!

Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...

Hope that this helps you to create better looking mobile apps!

Cheers,

RG