CODEWITHSUNDEEP
htmlcss
pattrick james
pattrick james

Reputation: 105

Font(Text) not resizing with respect to the width change

In the below two images, you can see that changing the width does not have any impact on font size and thus the **text is coming out of the sidebar.

I want the siderbar text to resize itself as the width of its parent (sidebar) decreases with respect to the body

Codes (HTML and CSS) are given below the images

enter image description here

enter image description here

HTML:-

<body>
    <div class="container">
        <div class="header">
                    <div class="header-image"><img src="images/logo.png" alt="logo"></div>
                    <nav>
                        <ul class="left-menu">
                            <li> <a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>

                        <ul class="right-menu">
                            <li><a href="#">+91 964941****</a></li>
                            <li><a href="#">Get a Quote</a></li>
                        </ul>
                    </nav>
        </div>

        <div class="content-a">
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
            <p>We offer demo sessions before making you enroll in any training course. 
               We respect your money and our content quality will be worth every penny of yours. Have Faith :) </p>
        </div>

        <aside class="siderbar">
            <ul>
                  <li><a href="#">Instagram</a></li>
                  <li><a href="#">Email</a></li>
                  <li><a href="#">Discord</a></li>
            </ul>
        </aside>
    </div>
</body>

CSS:-

body{
    background-color:#191C26;
    color:white;
}
/* Start of Header */
.header{
    margin-top:20px;
    height:100px;
    margin-left:150px;
}
.header-image{
    width:10%;
    display: inline-block;
    position:relative;
    top:36px;
}

.header-image img{
    width:100%;
}

.left-menu, .right-menu{

    list-style: none;
    font-size: 200%;
}

.left-menu a, .right-menu a{
    text-decoration: none;
    display: inline-block;
    color:white;
}

.left-menu{
    float:left;
    margin:0px;
    margin-left:12%;
}

.left-menu li{
    float:left;
  
}

.left-menu a{
  margin-right:20px;
}
.right-menu{
    float:right;
    margin:0;
}

.right-menu li{
    float:left;
    margin-left:10px;
}

.right-menu a{
    margin-left:20px;
}

/*End of Header */

/*Start of Mid Content*/
.content-a{
   width:45%;
   margin:auto;
   margin-top:80px;
}

.content-a h1{
    font-size: 150px;
    margin:0px;
}

.siderbar{
    display:inline-block;
    position:fixed;
    top:0px;
    left:0px;
    height:800px;
    width:10%;
    background-color: black;;

}
.siderbar ul{
    list-style: none;
    padding:0px;
    margin-top:400px;
    margin-bottom:486px;
    width:100%;
    
}

.siderbar a{
    display:inline-block;
    text-decoration: none;
    color:inherit;
    margin-bottom: 20px;
    width:100%;
    font-size: 200%;
}

Upvotes: 1

Views: 687

Answers (3)

Masoud alizadeh
Masoud alizadeh

Reputation: 91

I think this maybe will work, try this (use media query for responsive)

CSS:

.siderbar a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
  width: 100%;
  font-size: 1rem;
 }

@media (min-width: 55rem) {
  .siderbar a {
    font-size: 1rem;
   }
 }

@media (max-width: 55rem) {
  .siderbar a {
    font-size: 0.7rem;
   }
}

@media (max-width: 42rem) {
  .siderbar a {
    font-size: 0.5rem;
  }
}

Upvotes: 2

Rahul Daksh
Rahul Daksh

Reputation: 230

Instead of using pixel value use rem or em.

Eg: You wrote something like this

.content-a h1{
    font-size: 150px;
    margin:0px;
}

Use this instead

.content-a h1{
   font-size: 9.375rem;
   margin:0;
 }

Note: em and rem are relative length while pixel (px) is an absolute length value

Upvotes: 2

Ali Navidi
Ali Navidi

Reputation: 1035

try using vw for font size like this:

font-size: 8vw;

or use media queries like this :

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Upvotes: 1

Related Questions