Unwanted vertical space on resposive design

HTML & CSS
1

I don’t do this for a living, and am just trying to get my own stuff sorted, so please excuse me if I’m asking dumb questions. Thanks.

Trying to better understand responsive design, I’m experimenting with a tutorial from http://www.netmagazine.com/tutorials/build-basic-responsive-site-css#null.

I notice that after increasing the body front size, when reducing the browser window to see the reflow, unwanted vertical space appears between the logo and the nav.

Here’s a screenshot of 3 browser windows, the second of which shows the unwanted space:

Why is this and what’s the fix?

2

Do we need to assume that you’re following the exact same code that has been posted in the article?

The h1 has a top marting. I assume that’s the reason. I would be good to know if you have used some kind of reset because it could also maybe the browser’s embed stylesheet that may be affecting the output.

3

It is possible that there is a margin, which resulted in the. Check your code and make sure the margin is set to 0 in the media query for the second picture. let us know if it doesn’t work

4

Thanks. I used the example as-is, with no changes other than to increase the body font-size - and at 15px rather than 13px the issue happens.

What seems odd is that, regardless of any margins, it only happens when that font is 15px or greater - and continues to do so when media query margins are zero.

5

Well, a fixed unit for the font is not very responsive… Font is also supposed to adapt to the size of the screen is being used so it is better to use % or ems for responsive design.

I can’t test it where I am now but if that’s the code, then the only thing that can affect the position and space between the that text and the logo is the h1 CSS and the natural rules applied to ul and lis by the browser.

With natural rules I mean that by default the brower applies its own style sheet, even if the html document has none. And when it does, those rules that don’t collide with the existing style sheet will be applied too. That’s why we use resets… so the default values of the browser doesn’t affect us.

try to add a reset such as

*{padding: 0; margin: 0}

at the top of your style sheet. If then it works as expected, the browser’s style sheet was affecting your work. If that’s the case, consider to use a proper rest (this particular one is the most innefficient and slow of all the resets that you can use)

You can look at Eric Meyer’s reset.

6

Thanks.

1 I agree that px isn’t ideal, and hence when changing to % I noticed the problem of the unwanted spacing.

2 I’m familiar with resets, and the default code appears to have an appropriate one.

3 Having thought about this more, I think it’s behaving as it should…

Clearly, when the browser is narrowed the two items will move closer until their width is too great to display adjacent and so one will be displaced downward.

Increasing the font-size makes this happen sooner (at wider browser width), and so the nav will ‘slide’ under the logo as the browser is further narrowed - at least as long until the media query ‘flips’ the nav to the alternate (vertically stacked) display.

Increasing the max-width in the media query will hasten the point at which the nav ‘flips’, and so by setting that value sufficiently high - so that the combined width of the logo and nav will never be great enough to cause the displacement - the issue won’t arise.

So the ‘solution’ (to what really isn’t a problem) is to tweak that max-width according to the font-size and number of items in nav.

My initial thought that increasing the font-size triggered the issue is wrong - simply adding more items to the nav will do the same thing.

Clearly, I am an idiot and shall now try to stick to stuff I know.