With identical HTML code, and only minor CSS changes, why my site has additional padding when viewing on mobile?

Here is two code pen that I created.

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?

Remove the height from your .navbar class

.navbar{
  margin-bottom:0;
	border-radius:0;
	background-color:#383E4C;
	height: 80px;
}
1 Like

I see. Thanks!

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. :slight_smile: 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.

1 Like

I see. Thanks! :grinning: