Question

My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.

Red square represents an image, yellow represents some text and blue represents buttons.

Normally, the top version is displayed (the correct one)
When the screen is small, the second situation happens, when the bottom button jump to a new line.

Ideally, both buttons should stay one above the other. This is my css code:

{
    background-color: #6b89ac;
    border: 1px solid #89a9d0;
    border-bottom-color: #1d4474;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    margin-bottom: 3px;
    text-align: center;
    display: inline-block;
    width: 100px;
}

Answer 1

It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.

Depending on your code that new div might also need overflow: hidden.