Issue
I have this issue in my webpage: when I resize the screen size to approximately below 300px, when using Google Chrome devtools "toggle device toolbar" in mobile mode, my navbar width reduces a lot and does not include its links any more.
I have tried giving my navbar width: 100vw or 100%, and I have tried to apply this also to the body element, and that seems to have the same behavior when on small mobile screens.
I have tried also to set in the head element maximum-scale=1, user-scalable=no, but user-scalable no gives problems on the navbar.
I haven't found anything useful online and I am pretty new to webDev. Can you please help me?
I attach a link to a screenshot (in GitHub wiki) with an image of my problem
Here is my code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Kanit", sans-serif;
font-weight: 400;
}
.body-trade-page {
height: 100vh;
background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
}
.trade-navbar {
display: flex;
justify-content: flex-start;
width: 100vw;
height: 42px;
align-items: center;
padding-left: 12px;
background-color: rgb(255, 255, 255);
}
.trade-navbar div>a {
display: flex;
color: rgb(122, 110, 170);
font-weight: 400;
font-size: 16px;
font-weight: 400;
text-align: center;
opacity: 1;
padding: 10px 10px;
}<!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>document</title>
</head>
<body class="body-trade-page">
<!--menu-->
<nav class="trade-navbar">
<div class="trade-item">
<div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/limit">Limit</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/liquidity">Liquidity</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/perpetual">Perpetual</a></div>
</div>
</nav>
</body>
</html>Solution
min-width: fit-content;
If you add the code above to your css class '.trade-navbar' it will force your navbar to fit all of the elements within it, no matter the size of the window.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Kanit", sans-serif;
font-weight: 400;
}
.body-trade-page {
height: 100vh;
background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
}
.trade-navbar {
display: flex;
justify-content: flex-start;
width: 100vw;
min-width: fit-content; /* <-- this one! */
height: 42px;
align-items: center;
padding-left: 12px;
background-color: rgb(255, 255, 255);
}
.trade-navbar div > a {
display: flex;
color: rgb(122, 110, 170);
font-weight: 400;
font-size: 16px;
font-weight: 400;
text-align: center;
opacity: 1;
padding: 10px 10px;
}<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>document</title>
</head>
<body class="body-trade-page">
<!--menu-->
<nav class="trade-navbar">
<div class="trade-item">
<div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/limit">Limit</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/liquidity">Liquidity</a></div>
</div>
<div class="trade-item">
<div class="trade-link"><a href="/perpetual">Perpetual</a></div>
</div>
</nav>
</body>
</html>Hope this helps :D
Answered By - HorizonZz
