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

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

#1

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?


#2

Remove the height from your .navbar class

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

#3

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?


#4

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.


#5

I see. Thanks! :grinning: