Question 318994 in CSS Question posted in
Some basic documentation can be found here.

How to increase or decrease the width of the nav bar by using the media in CSS

How to increase or decrease the width of the nav bar by using the media in CSS
I am trying to decrease and increase the side bare width of the side bar by using media in CSS.

@media (min-width:289px)and (max-width:1100px){   

 .nav .lib{       

  width: 100px;   

  }

 }
Tags:

3

Answers


  1. 0

    First, set a default width for your navbar that will apply when none of the media query conditions are met.

    .nav .lib {
  width: 200px; /* Default width */
}

    Then, use media queries to change the width based on the viewport’s width. You’ve already started this; you can continue by adding more conditions for different ranges.

    /* For viewports between 289px and 1100px */
@media (min-width: 289px) and (max-width: 1100px) {
    .nav .lib {
      width: 100px;
   }
}

/* For smaller viewports (less than 289px) */
@media (max-width: 288px) {
   .nav .lib {
     width: 80px; /* Adjust as needed */
   }
}

 /* For larger viewports (more than 1100px) */
@media (min-width: 1101px) {
   .nav .lib {
      width: 300px; /* Adjust as needed */
   }
}
    Login or Signup to reply.
  2. 0

    first you have to set a default width for ex:

    .nav .lib {
  width: 200px; 
}

    second you have to add the specific value you want for specific media dimensions ex:

    @media (min-width: 289px) and (max-width: 1100px) {
  .nav .lib {
    width: 150px;
  }
}
    Login or Signup to reply.
  3. 0

    You just need to add one value either min-width / max-width two values are not needed unless you targeting a specific device.

    For mobiles, the min-width starts from 320px for your future reference.

    @media (min-width:320px) { /* iPhone SE*/
.nav .lib { 
   width: 100px; 
 } 
}
@media (min-width:375px) { /* iPhone 13 Mini*/
.nav .lib { 
   width: 200px; 
 } 
}
@media (min-width:767px) { /* iPads  starts from 768 */
.nav .lib { 
   width: 300px; 
 } 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search