I edited the font size of my h1 tag, but it looks like the height of the div doesn't automatically fit it:
I tried manually setting the height, but then the div just extends below instead of encasing the text:
Is there any way to make the div fit to the font size?
Here's my css:
h1 {
background-color: red;/* TEST */
font-family: Lobster;
font-size: 66px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26px;
}
Change:
h1{
background-color: red;/* TEST */
font-family: Lobster;
font-size: 66px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 1;/*Change is here, don't put px at the end*/
}
See if that works for you.
Set the line-height and font-size to the same value:
font-size: 66px;
line-height: 66px;
Related
I am trying to recreate the effect below in which the white background only follows the length of the text. The issue I am running in to is that the words appear on different lines depending on page width. SO the word break is not guaranteed and I can not wrap in spans as I need the total width to be the width of the longest line shown, but the background only as wide was each line.
I currently have the following code.
.signup-heading {
max-width: 39%;
position: absolute;
left: 7%;
top: 12%;
}
.signup-heading > h2 {
display: block;
word-wrap: break-word;
font-family: 'Circular';
font-family: CircularStd;
font-size: 45px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.29;
letter-spacing: normal;
color: #2c2a2a;
}
<div className="signup-heading">
<h2>Hi there, we are so happy to have you here!</h2>
</div>
You can try with display: inline
body {
background: #f0f0f0;
}
.signup-heading {
max-width: 39%;
position: absolute;
left: 7%;
top: 12%;
}
.signup-heading > h2 {
display: inline;
background: #fff;
word-wrap: break-word;
font-family: 'Circular';
font-family: CircularStd;
font-size: 45px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.1;
letter-spacing: normal;
color: #2c2a2a;
}
<div class="signup-heading">
<h2>Hi there, we are so happy to have you here!</h2>
</div>
I use Font Awesome to put an icon before my hyperlink. I have a css for my hyperlink:
a.cancel {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #eb1700;
text-transform: uppercase;
text-decoration: none;
}
a.cancel:before {
font-family: "Font Awesome 5 Pro";
content: "\f057";
padding: 0 4px 0px 0px;
font-weight: 300;
}
a.cancel:hover {
text-decoration: underline;
}
a.cancel:hover:before {
text-decoration: none;
color: blue;
}
Unfortunately, the text-decoration isn't removed under my icon when hovered. How can I fix this?
There are many ways to fix that, but here is how I usually proceed:
Set display: inline-block to the link, then float: left to its pseudo-element.
a.cancel {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #eb1700;
text-transform: uppercase;
text-decoration: none;
display: inline-block; /* + */
}
a.cancel:before {
font-family: "Font Awesome 5 Pro";
content: "\f057";
padding: 0 4px 0px 0px;
font-weight: 300;
float: left; /* + */
}
a.cancel:hover {
text-decoration: underline;
}
a.cancel:hover:before {
text-decoration: none; /* You can remove this line */
color: blue;
}
hello
I'm guessing a bit on your HTML here. Assuming there is no additional HTML in your A tag, the short answer is: you can't have the text-decoration apply to only part of the A tag via CSS. It applies to all of the A tag or not. The :hover is triggering on the A tag. The :before isn't truly a separate DOM element. The A:hover is triggering regardless of if you're over the :before portion or the regular portion, if that makes sense.
However, if don't mind adding a little extra HTML inside your A tag, you can have the underline apply only to that element:
<a class="cancel" href="http://example.com"><i>http://example.com</i></a>
a.cancel:hover i {
text-decoration: underline;
}
The above will tell it to put the underline only in the internal tag, not the whole A tag. You can use whatever inline tag you want, such as span, etc. This may not be what you want, but without some sort of separation, you can't have the A:hover apply only to the text and not to the :before. It's all one DOM element. If you inspect it in Chrome (and others), you'll see the ::before inside the A container.
I have a font in photoshop:
and when I set font-weight: 100 the result is too bold.
Font-size:72px, font-family:"Montseratt"
When I'm changing font-weight from 300 to 400 font also changings (for font-weight: 100, 200, 300 font the same). I guess it means that property works, but how can I make font thinner than value that property can set
you can do this.
you make a typo it's font-family: 'Montserrat', sans-serif; not
font-family:"Montseratt"
body {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.thin {
font-weight: 100;
}
.normal {
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400" rel="stylesheet">
<p class="thin">THIN<p>
<p class="normal">NORMAL</p>
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
it may help you
This is what my CSS looks like on the page.
<!DOCTYPE html>
<html>
<head>
<style>
p.addresscenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 0;
text-align: center;
white-space: pre;
}
p.endtagbold {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
line-height: 1.2;
margin: 0;
padding-top:16px;
}
p.hoursofoperationcenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: pre;
}
p.infop {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:30px;
}
p.infostextbox {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 550;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:16px;
}
p.topmenu {
background-color: none;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.4;
margin: 0;
text-align: center;
}
p.towncounty {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.4;
margin: 0;
padding-top:16px;
}
</style>
</head>
<body>
<p class="topmenu">Text with id tags here.</p>
There is a set of columns here made with these tags
<div class="one-half first">Text</div>
<div class="one-half"> Text </div>
Then there is more text which is formulated by <p class=""></p> and then finally the <!--nextpage--> attribute occurs somewhere in the middle.
After the <!--nextpage--> tag I have more text with <p class=""></p>
The entire page ends with
</body>
</html>
On my other pages that are not split the css shows up fine. For whatever reason the css is not showing up on page 2 after the <!--nextpage--> . What do I have to do to make sure the css shows up before and after the <!--nextpage--> attribute.
I'm not sure if I understand everything well, but You should try to place <!--nextpage--> between the tags, and not inside of them.
For example:
<p>asdasd</p><!--nextpage--><p>asdasd</p>
Is ok, while:
<p>asdasd<!--nextpage-->asdasdasd</p>
is not ok. I hope this is the case, if not, please do not downvote and update You question with full code. Then I will try to update my answer.
Few more words. When You click next page, then the paragraph element has started on the page before. So on the actual page there is no paragraph start, but only: asdasdasd</p> which is causing problems, and is not a valid html.
Best regards.
Here is the screenshot of my 'icon-reorder' on Chrome.
I can't figure out why it doesn't have the equal space between each bar.
I just use <i class="icon-reorder"></i> and that's it.
Do we have a solution for this?
Make sure you are not overwriting any of the FontAwesome defaults and you have defined the font-size before adding the fonts.
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;