I have used this custom CSS to format the last three letters of the single word on the second line of my banner text on my site as bold. However, the mobile view of the last three letters displays it as a subscript. I would like all of the second line in the mobile view to be the same size as the last three letters. The website is chad-ruffin.squarespace.com. Custom CSS:
.desc-wrapper p:nth-of-type(2)
{ display:inline-flex;
font-family: brandon-grotesque;
font-weight: 400;
font-style: normal;
font-size: 68px;
text-transform: uppercase;
line-height: 1em; }
It's not a subscript. It's just that the font-size: 68px is larger than the rest on mobile. Scale it down on mobile to maybe 36px and it should fit right. You might have to change the line-height too.
Related
I use these sizes for the text in my CSS but I am facing a problem with line height. I want to decrease the line height in CSS but when I use mark tag the words will be on each other. I have attached an image that shows the issue:
Code:
h1 {
font-size: 58px;
text-transform: uppercase;
margin: 0px 0px;
line-height: 1em;
font-family: "frutigerBold75";
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
you should put desired line-height inside mark
before
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
after
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
}
mark{
display: block;
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
It looks to me like the issue is a font issue.
(that's the reason why if running the code snippet it's correct).
What I would suggest is to try to change the line height (manually) till you get a result you'd like.
Also, something else you could keep in mind is the internal padding (as it seems to be some from the picture you added.
unfortunately, without the same font you're using it's quite tricky to debug and help you further more.
so, to recap:
manually adjust the line height (to be 1.1em or more, for instance)
try with a different font
make the padding to 0, and start adding some as required
Given the following css code, the text (arrow) is vertically centered in Chrome while not in IE11, could someone tell me why and how can I achieve the same effects in IE11?
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
}
<span>⇑</span>
Screenshots:
Chrome:
IE11:
By default, the computed font-family is Times New Roman as the inspect view shows:
However, looking through the supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1)is not supported by Times New Roman. In this case, browser is free to choose which font to use, and we have no idea how the characters would be aligned (since we don't know which fallback font the browser has chosen to use internally), that causes the behavior varies from browsers.
So how to make it vertically centered? One simple method would be explicitly specifying a font-family which contains ⇑ (U+21D1), for example, Cambria
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
font-family: Cambria;
}
<span>⇑</span>
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.
I want to evenly align the two images on either side of the h2 for a responsive design and allow the images to scale down when the browser is reduced, eventually disappearing in small windows such as on mobile devises. Would like to know what I am doing wrong.
JsFiddle
the h2 needs to have float: left; as well
You also need to create a css sheet that calls for the actions based on the screen size (in pixels)
see link:
jsfiddle
All you need then is to use float left
#tag-container h2.tag {
font-family: 'Droid Serif', serif;
font-size: 52px;
font-style: italic;
color: #34291c;
letter-spacing: 1px;
text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
text-align: center;
margin: 0;
**float: left;**
}
The introduction of #font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.
This is the view from Google Chrome 19.0.
Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?
Your code is correct. The problem is your browser/ Each browser (browser rendering engine to be specific) renders contents in a different manner. You may not get the exact same output from each browser all the time. The features and all other blings might be the same but it is almost always a different story in terms of rendering a web page.
we don't have nothing much to do in this issue. Its totally depends on the browser's text rendering engine. Every single browser renders text differently.