Can't get rid of the extra margin below my menu in responsive theme

jppv.net is the place where I’m working on, It’s a responsive theme and when I the screen is scales down the screen size to 719px (max) my menu layout changes but an extra 20 odd pixel space is being added and I can’t get rid of it. see the attached image.

Hi,

I’m not sure if this is what you mean but the 20px purple backgrond beneath the nav is caused by the 20px padding on the parent #header_margin and can’t be removed with a negative margin on an inner element.

You just need to do this:


#header_margin{padding-bottom:0}

Unless you meant something else of course :slight_smile:

Boss now new problem arose. the menu bar gets extra margin/padding from the left.

Hi,

You didn’t add the code I gave you but instead added an invalid rule before the margin rule in the media query causing it to be missed.

line 1631 style.css
You added this:


#header_margin{padding-bottom:0};

It should be this:


#header_margin{padding-bottom:0}

There should be no semi-colon at the end. Otherwise it makes the following rule unmatchable.


	#header_margin{padding-bottom:0};

	.header-container {
		margin-left:0;
	}

It shuld be:


	#header_margin{padding-bottom:0}

	.header-container {
		margin-left:0;
	}

I love you man… Your awesome!! I thought every statements should end with ; . can you guide me, when not to use semi-colons ?

Thanks alot…

Hi,

Your mistake was adding the semi-colon outside the closing bracket thus effectively beginning a new rule :slight_smile:

Regarding semi-colons then a semi-colon means that there are more rules to follow. The last rule (or a single rule) doesn’t need them but does no harm either way.

e.g. All the following are valid:


#header_margin{padding-bottom:0}

#header_margin{padding-bottom:0;}

#header_margin{
padding-bottom:0;
margin:0
}
#header_margin{
padding-bottom:0;
margin:0;
}

As a rule of thumb I usually leave the trailing semi-colun from single rules:


#header_margin{padding-bottom:0}

But I always add it at the end in multiple rules.


#header_margin{
padding-bottom:0;
margin:0;
}

It’s up to you. It’s probably safer to tell people to always add it but in the end its just personal preference and saves a few bytes if you omit it.

oh… silly mee…:rofl:

guess I’m used to seeing this format (in multiple lines)

#header_margin{
padding-bottom:0;
}

where actually this is the same thins as

#header_margin{padding-bottom:0;}

or

#header_margin{padding-bottom:0}

All good now… Thanks Again.

Its just a preference of mine to put single rules on their own line and save 3 separate lines of code in the stylesheet. In a large stylesheet it soon mounts up and you have to keep scrolling forever to read the stylesheet. I usually only do this with single rules and then revert to the usual format for multiple rules.

you know what, I think I’m going to like this. As this will enable me to understand other people’s codes. And not get bluffed when I see a different rule like now.

For single rules your one and the regular rules using multiple lines.

by the way this is valid too right? One Line!!

#header_margin{padding-bottom:0; margin:0;}

That’s valid as well. In fact, you could write all your styles on a single line. Not that that would be a practical idea, at least not in pre-production mode, but it’d be perfectly valid.

Thanks… There should be a thanks button in sitepoint!! :slight_smile: