Html Question posted in
Some basic documentation can be found here.

Html – sidebar text overflows out of its limit

im trying to make a sidebar where the texts/links should be in the center of the side bar but the text keeps on overflowing out of it becuase the words become longer and i dont know how to fix it, ive tried using padding and margin but it wont work . i am hoping someone can help find out what im doing wrong because i cant find the answer or where the problem is even

*{
    margin: 0;
    padding: 0;
}

.sidebar{
    background-color: rgb(189, 186, 186);
    width: 10vw;
    font-family: "Fira Sans", sans-serif;
    height: 100vh;
    
}

.sidebar nav{
    padding: 40px;
    
}

.sidebar nav li{
   
    list-style: none;
    font-size: 20px;
    padding: 33px 0;
    white-space: nowrap;
  display: inline-block;
  overflow: hidden;
 
}

.main{
   
    width: 90vw;
}

.container{
    display: flex;
}

.infoContainer{
   
    height: 58vh;
    width: 80vw;
    margin: 140px auto;
    display: flex;
    justify-content: space-around;
}

.devInfo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: "Source Code Pro", monospace;
    margin: 10px;
}

.hello{
    font-size: 50px;
}
.name{
 font-size: 25px;
 font-weight: bold;
 font-family: "Fira Sans", sans-serif;
}
.about{
 font-size: 20px;
}

.moreAbout{
    font-size: 15px;
    font-family: "Fira Sans", sans-serif;
}

.buttons {
    margin-top: 34px;
}
.buttons button{
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 21px;
    margin: 0 3px;
    cursor: pointer;
}

.devPic img{
    height: 58vh;
}
<div class="container">
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/intro.html">My Intro</a></li>
        <li><a href="/services.html">Services</a></li>
        <li><a href="/contact.html">Contact Me</a></li>
        <li><a href="/blog.html">Blog</a></li>
      </ul>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>

i tried using padding and margin to shift the content into the middle more but its not responding like i hope it would

Tags:

2

Answers


  1. 0

    To fix this problem, I have set overflow: scroll, so you can scroll inside the navbar so it wont come out. If you dont want it to scroll, please consider using icons instead.

    I have attached this code snippet below, please review it:

    I hope this helped!

    *{
    margin: 0;
    padding: 0;
}

.sidebar{
    background-color: rgb(189, 186, 186);
    width: 10vw;
    font-family: "Fira Sans", sans-serif;
    height: 100vh;
    
}

.sidebar nav{
    padding: 40px;
    overflow: scroll;
}

.sidebar nav li{
   
    list-style: none;
    font-size: 20px;
    padding: 33px 0;
    white-space: nowrap;
  display: inline-block;
  overflow: hidden;
 
}

.main{
   
    width: 90vw;
}

.container{
    display: flex;
}

.infoContainer{
   
    height: 58vh;
    width: 80vw;
    margin: 140px auto;
    display: flex;
    justify-content: space-around;
}

.devInfo{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: "Source Code Pro", monospace;
    margin: 10px;
}

.hello{
    font-size: 50px;
}
.name{
 font-size: 25px;
 font-weight: bold;
 font-family: "Fira Sans", sans-serif;
}
.about{
 font-size: 20px;
}

.moreAbout{
    font-size: 15px;
    font-family: "Fira Sans", sans-serif;
}

.buttons {
    margin-top: 34px;
}
.buttons button{
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 21px;
    margin: 0 3px;
    cursor: pointer;
}

.devPic img{
    height: 58vh;
}
a {
word-wrap: break-word;
}
    <div class="container">
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/intro.html">My Intro</a></li>
        <li><a href="/services.html">Services</a></li>
        <li><a href="/contact.html">Contact Me</a></li>
        <li><a href="/blog.html">Blog</a></li>
      </ul>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Don’t set fixed widths for your sidebar or your main container, just let them work out their widths automatically.

    body {
  margin: 0;
}

.container {
  display: flex;
}

.sidebar {
  background-color: rgb(189, 186, 186);
  font-family: "Fira Sans", sans-serif;
  height: 100vh;
  padding: 2em;
}

.sidebar nav {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.sidebar nav a {
  white-space: nowrap;
}

.infoContainer {
  height: 58vh;
  width: 80vw;
  margin: 140px auto;
  display: flex;
  justify-content: space-around;
}

.devInfo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: "Source Code Pro", monospace;
  margin: 10px;
}

.hello {
  font-size: 50px;
}

.name {
  font-size: 25px;
  font-weight: bold;
  font-family: "Fira Sans", sans-serif;
}

.about {
  font-size: 20px;
}
    <div class="container">
  <div class="sidebar">
    <nav>
      <a href="/">Home</a></li>
      <a href="/intro.html">My Intro</a>
      <a href="/services.html">Services</a>
      <a href="/contact.html">Contact Me</a>
      <a href="/blog.html">Blog</a>
    </nav>
  </div>
  <div class="main">
    <div class="infoContainer">
      <div class="devInfo">
        <div class="hello">Hi I am</div>
        <div class="name">Awais Rafique</div>
        <div class="about">Developer, Programmer, Software Engineer</div>
       </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search