How to fix button text overflowing button

HTML-CSS
1

image
image1920×123 8.61 KB

I don’t know why the button doesn’t just, increase in size to contain the larger text.
How can I make it happen?
Thank you very much!!

2

Make the button bigger to accommodate the text.

3

Not manually calculating.

4

We can’t really give you good help unless we can see the project.

1 Like
5

Ok let me post it. sry

6 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flipkart</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<style> 
* {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 0;
    margin: 0;
    /* max-height: 100%; */
    max-width: 100%;
    /* font-size:10px; */
}

:root {
    --main-bg-color: #2874f0;
}

nav {
    display: flex;
    justify-content: center;
    /* padding-right:250px;
    padding-left:250px; */
    /* align-items:center; */
    /* outline:2px solid red; */
    background-color: var(--main-bg-color);
    height: 58px;
}

.logo {
    max-width: 88px;
    /* max-height:66px; */
    margin: auto;
    margin-right: 10px;
    margin-left: 15px;
    justify-self: flex-start;
    /* outline:2px solid red; */
}

nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 300px;
    padding-right: 20px;
    /* outline:5px solid aquamarine; */
}

nav ul li {
    display: inline-block;
    list-style: none;
    /* outline:2px solid red; */
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    margin-left: 10px;
    margin-right: 10px;
    /* outline:2px solid blue; */
}

nav ul li a:hover {
    font-weight: 900;
}

.search {
    padding: 0 12px;
    height: 27px;
    width: 30vw;
    margin: auto 0;
    border-radius: 7px;
}

.searchBtn {
    padding: 5px 10px;
    height: 30px;
    margin: auto 10px;
    font-family: Roboto;
    font-size: 25px;
    background-color: var(--main-bg-color);
    border-radius:10px;
    border:2px solid white;
    color:white;
}
</style>
</head>
<body>
    <nav>
        <img src="img/logo.png" alt="Flipkart" class="logo">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <input type="text" class="search" placeholder="Search here">
        <button class='searchBtn'>Search</button>

    </nav>
</body>
</html>
7

Here’s the live website with the code :- quirky-ptolemy-v3ebd - CodeSandbox

8

The vertical height a line of text takes up is not just the font size but also the line height. You’ve set the font size for the button to 25px but most browser’s set the default line height to more than 1 (I believe it is something like 1.2), so the amount of vertical space the text takes up is more than 25px (assuming 1.2 line height then it would take up 30px).

You’ve set your button height to 30px so the button text is exactly as tall as the button itself but then you have also added 5px of top padding to the button which is pushing the button text down and thus it is overflowing the bottom of the button.

I’ll leave it up to you as to how you want to solve this but I will suggest that you might want to reconsider using px units for height and instead go with something like em (or rem), which is much more responsive.

1 Like
9

Thanks a lot it really helped!!
I set line-height to 1 and it solved the problem!
Thanks a lot!

10

ok. But what do rem and em mean?

11

Understanding em Units in CSS

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.