On this page, the heading is shown on a beige background, followed by a section with a grey background.
I would like to eliminate the space underneath the title, such that the bottom of the letters are at the point where the two sections meet. I expected this to be pretty simple, probably just a matter of removing some bottom padding or margin, but I cannot figure out what is causing this space to appear under the title.
try to change this class hero-h1 to this:
.hero-h1 {
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 68px;
}
if you decrease line-height you can delete space underneath
It's your line-height:
CSS:
.hero-h1{
line-height: 62px;
}
This is what looks best in Google Chrome and Firefox on OS X. Browsers and operating systems may vary. Also, people may have different system fonts. Consider using an image instead of you really want it to stay consistent across browsers.
Another thing to note. This is your current font selection:
h1, h2, h3, h4, h5, h6{
font-family: 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
But Arial is a much MUCH more common font. For near pixel perfection and more consistency if you don't want to go with an image, to change it to this:
h1, h2, h3, h4, h5, h6{
font-family: Arial, 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, sans-serif;
}
Which would make your line-height this:
.hero-h1{
line-height: 60px;
}
Or you can add margin-bottom: -18px in hero-h1 class
Additionally to the answers about your line-height you can also simply change the .hero-h1 to a block, and then set it's height to match the line-height
.hero-h1 {
display: inline-block;
width: 100%;
height: 100px;
font-size: 88px;
text-shadow: -1px -1px 0 #888888;
line-height: 100px;
}
You can follow this method, so you do not have to play with negative margin or mind font-size of H1.
header's height is set from line-height , overflow:hidden to hide text-shadow overflowing..
h1 is set as display:inline-block and vertical-align:bottom. reset margin to 0
For the text inside h1, you need to set line-height down to 0.7-0.8em to swallow gap left for letters like j,q,y.
to size and tune your header, play with header line-height and h1 font-size.
Related
So I'm trying to change the font size of an h1 element and it is not changing. I used developer tools to see what is happening and this is what I found.
#media (min-width: 1200px)
.h1, h1 {
font-size: 2.5rem;
}
It said that the above was active and thus my h1 style in my css file was not kicking in. Does anyone know what this is?
The same happens when I try to change my font weight. Something like this is active and it is not allowing me to change the font weight.
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: var(--bs-heading-color);
}
Can anyone please help me here?
You can use !important to apply your changes. Just like this:
font-size: 3rem !important;
So, it gives priority to your styling and you will be able to change your font-size.
You have 2 Options :
Load your CSS/CSS files before these properties so that your element get the required properties.
You can use !important but it can cause issues in the future if you want to change the properties of these HTML tags again.
resizing the #media needs to be relative to some container. Add rem for line-height may provide container.
In my react app whereever i place h1 tag it just showing a normal font. On inspecting i found that my text is rendering as h1 but style of h1 is
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
I also tried to change this in my global.css
h1{
font-size: large;
font-weight: 900;
}
But it did not work. So how to render h1 as heading 1 text and font size
h1{
font-size: 80px;
font-weight: 900;
}
<h1>Example</h1>
It appears to be the problem of specificity. Your global.css rules are being overridden by more specific rules. And from the available information, I don't know what or where those rules are.
This will help you understand better: MDN CSS Specificity
Looking at the widely spaced text that's in the center of this site: http://www.sharonhadary.com/ .
I tried setting the line-height property to 1 in the web inspector (it was originally set to 1em), but this had little effect. This is surprising to me, because it looks like that text has a line height of 2 or 3.
Remove the giant font-size and it's fixed.
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
/* font-size: 100px; */ /*REMOVE THIS */
font-weight: normal;
line-height: 1.1em;
}
Also <font> has been deprecated and should no longer be used
Try to add line-height: 22px instead of 1em.
I didn't understand your problem correctly but
1) If you are concerned about spacing in text, remove "word-spacing: .1em;" from .banner h2 CSS rule in the main_style.css.
2) If you are concerned about spacing between lines, reduce line-height in the .banner h2 CSS rule in the main_style.css.
When I inspect element using Chrome Dev Tools the default font-size property is missing for the h4 tag. All the other tags like h1, h2, h3, h5, h6 are showing the font-size property.
See the screenshot
I have checked the default style sheet for HTML 4, here also the font-size property is missing.
Reference: http://www.w3.org/TR/CSS21/sample.html
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
What might me the valid reason for this behavior?
Thanks in advance.
The reason is that the designer of the browser’s style sheet wanted to make the default font size of h4 equal to 1em, i.e. the font size of its parent. This makes it fit to the scale of heading font sizes. When font-size is not set for an element at all, it inherits the size from its parent, so the result is the same as it would be with h4 { font-size: 1em }. (Not in all circumstances, but in these. The browser’s default style sheet is lowest in the cascade, so a relevant setting in any other style sheet will override it.)
Note that the sample style sheet for HTML 4 in the CSS 2.1 specification is outdated and contain some odd settings that were never implemented in browsers, and many settings have been tuned later. The Rendering section in HTML5 PR contains a much more modern description of typical (and more or less recommended) default settings in browsers. For clarity, it explicitly sets font-size: 1.00em; on h4.
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.