How to make the button not resize in width when the screen size gets smaller?

user_15581947 0
Viewed 658

I want the button not to change its size in width when the screen size gets smaller. What should I do to keep the shape of the Add admin button the same?

This is how the button shanges its shape: My buttons

I want the shape to stay like this: Desired result

Here is my CSS code:

.button {
    background-color: black;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 10px 25px;
css html
3 Answers

You do not need to widen the buttons at all Just control the text so that it does not break the line on different devices

.button { 
    ...
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}
user_83496770

Add white-space: nowrap;

.button {
    background-color: black;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    padding: 10px 25px;
    white-space: nowrap;
}
user_40950560 
{

min-width: (desired value) px!important;
max-width: (desired value) px!important;
}

Putting a static value should work :) Put them the same value if you want the exact same in all devices :)

user_147554060
Related