Menu icon Foundation
Issues with fixed height headers

Hi,

I've just started using Zurb and I think it's a great framework. However, I'm having an issue with something that seems rather simple yet I can't get my head around it. My h1 seems to have a fixed height/area so that it always has space above and below it. I know it's not the margins as I have inspected with Google Chrome. How do I get rid of this extra height and what is the reason for it?

I've tried changing the height and the line-height though this didn't really solve the problem as when the text was an anchor, it still had a large active area around it meaning that even white space below the word was working like an anchor tag.

Please see attached screenshot and code.

Thanks

Screen shot 2557 02 20 at 3.21.15 pm

.tagline {
    display: block;
}
.logo-text {
	font-size: 13.750em;
	font-family: 'Museo', 'Times New Roman', serif;
	text-shadow: -1px 3px 5px rgba(0,0,0,0.3);
	display: inline-block;
	position: relative;
}
.logo-image {
	background: url('img/color-scheme.png') no-repeat;
	width: 164px;
	height: 168px;
}
            

         

line-heightheightanchor

Hi,

I've just started using Zurb and I think it's a great framework. However, I'm having an issue with something that seems rather simple yet I can't get my head around it. My h1 seems to have a fixed height/area so that it always has space above and below it. I know it's not the margins as I have inspected with Google Chrome. How do I get rid of this extra height and what is the reason for it?

I've tried changing the height and the line-height though this didn't really solve the problem as when the text was an anchor, it still had a large active area around it meaning that even white space below the word was working like an anchor tag.

Please see attached screenshot and code.

Thanks

Screen shot 2557 02 20 at 3.21.15 pm

.tagline {
    display: block;
}
.logo-text {
	font-size: 13.750em;
	font-family: 'Museo', 'Times New Roman', serif;
	text-shadow: -1px 3px 5px rgba(0,0,0,0.3);
	display: inline-block;
	position: relative;
}
.logo-image {
	background: url('img/color-scheme.png') no-repeat;
	width: 164px;
	height: 168px;
}
            

         
Donovan Ng over 5 years ago

my understanding is that you are using "h1" and foundation has presets for it.
please read this link on how to make changes to your h1 type: http://foundation.zurb.com/docs/components/typography.html

you can customise your h1 - with line-height/font-size. play around with it