How to reduce Navbar height in Mobile view?

Question

bootstrap and css is used to make web page responsive

Answer 1

plz explain

Answer 2

@media

Answer 3

1. You can define a second set of styles inside @media so that it will be triggered and replaced the original style.

2. Here is an example how @media is used to alter the positions based on screen width (portrait view of mobile VS landscape view of mobile)
https://code.sololearn.com/W02pmd87hzEz/?ref=app

Note that the sequence of styles depends on the sequence of the screen size conditions, in my example code it is
@media only screen and (max-width: 900px) {
}
@media only screen and (max-width: 400px) {
}

3. Basic Understanding at
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

4. Pratical ways at
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

5. Full details
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Especially the browser compatibility