I did not change the HTML code at all, only some minor styling in the CSS part. When viewing on mobile, (shrink your browser to 1/3rd of its width)my page has this addition padding on its nav bar, while the original does not. Why?
Also I found myself keep using code like : height:300px; to give a certain object a certain amount of height or width.
However when I see other people’s code, they somehow manage to use them as less as possible. Cos it will give you trouble when it comes to a website’s responsiveness.
WHen do I need to use “width&height” property when coding a website?
When you want a FIXED width and height. Okay, that may sound like a smart aleck answer (obvious answer), but I only use it when I want something to show at a specific width/height (in pixels), or a specific ratio (in % values).
Specific width/height in px may cause problems in responsive sites, so you’ll need to check and may require the use of @media queries to override these fixed width/height values at certain device screen widths. With percentages, it’s not so much a problem at wide screens, but at small mobile screens, then it may cause problem, then you may also need to override these % values using @media queries.
In your example above, your buttons are already controlling the overall height your navbar is shown so there’s no need for a height parameter. You can just use padding to give it some spacing.
You may also want to look at min-height css property. It can come in useful. You set a fixed minimum height for a div to display, but if needed, the div can grow taller than your min-height property.