I'm going to start with saying I'm a total noob in coding school and to please be kind. I'm attempting to help my husband with his blog: https://directionandpace.com/ There is an issue with the title Direction and Pace.
First, he asked if I can remove title link that redundantly links back to the page. There isn't a way to easily edit WordPress HTML (just the stylesheet) so I thought I'd figure that out later and just change the link color to black instead of blue. ;)
Second, we both realized that when you click on the second page "Who We Are" the title changes to a non bold serif and ITS DRIVING ME CRAZY.
Code Below:
What should be just the body and the only Serif in the CSS:
body, button, input, select, textarea {
color: #776f6f;
font-family: Merriweather, Georgia, serif;
font-size: 15px;
line-height: 2;
}
The CSS for the Title:
.entry-title {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
Is it somehow assuming the entire second page (including the title) is the body? Halp.
The issue is that on your homepage that text is wrapped in a <h1> element but in the who-we-are page it's wrapped in a <p> element. Your CSS has the rule:
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700;
text-rendering: optimizeLegibility;
color: #1a1a1a;
}
that is applied on the homepage but not on the who-we-are page. Easiest solution would be to update the code or template for the who-we-are page to change the <p> to a <h1> to match the home page.
Home page heading HTML:
<div id="site-identity">
<h1 class="site-title">Direction & Pace</h1>
<p class="site-description">Explore. Experience. Always.</p>
</div>
Who we are heading HTML:
<div id="site-identity">
<p class="site-title">Direction & Pace</p>
<p class="site-description">Explore. Experience. Always.</p>
</div>
The title on the main page is wrapped in a heading tag, so it's getting the correct heading styling:
<h1 class="site-title">Direction & Pace</h1>
However, the title on the about page is wrapped in a <p> tag, so it's getting the body styling:
<p class="site-title">Direction & Pace</p>
Related
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
If I assign the ID Test to a section in HTML and modify that in CSS, the text is modified. But, when I change it to an ID like About the CSS no longer works on the text, and it's just normal <p> formatting. How do I fix this?
<section id="About">
<p>We define a Christian as someone who affirms the Nicene Creed</p>
</section>
#About
{
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Ok, so I have html code like the following:
<div class="aClass">Thing One/Thing Two/Thing Three</div>
and the "/" displays correctly on IE and FireFox, but for Chrome and Edge it doesn't. There is no specific CSS styling applied to the class or any explicit font-family. The image displayed is:
Also, specifc codes such as / don't fix the problem
EDIT: I forgot to mention that I'm using bootstrap... Don't know if that has any impact or not.
well if i'm understanding the same what you meant by the question then i've just tested it on mentioned browsers and it works perfectly fine. i don't see any problem. or if you can elaborate your question with the help of screenshots, it might help us to answer you properly..
following snippet might prove helpful.
div.withCss{
font-family: arial;
font-size: 20px;
}
<html>
<head>
</head>
<body>
<div class="aClass">Thing One / Thing Two / Thing Three</div>
<div class="para"><p>Thing One / Thing Two / Thing Three</p></div>
<div class="withCss"> Thing One / Thing Two / Thing Three </div>
</body>
</html>
I found the issue. The site that I'm working with, they have an extra css file that contains the font info.
#font-face {
font-family: 'Campton Bold';
src: url('../fonts/campton/Campton-BoldDEMO.otf');
}
#font-face {
font-family: 'Campton Light';
src: url('../fonts/campton/Campton-LightDEMO.otf');
}
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 16px;
}
h2, h3, h4, h5, h6, .bold-text {
font-family: "Campton Bold", sans-serif;
}
h1, .light-text {
font-family: "Campton Light";
}
header p {
font-size: 18px;
}
The "Campton" variations are what's causing the problem. I just have to change those and it's fixed.
I have a paragraph style applied to a wrapper, but in Internet Explorer (I'm testing with IE 11) the styles are not cascading.
My css is as follows:
.typo--paragraph p, .typo--paragraph {
font-family: "Brown Regular", "Helvetica", sans-serif;
font-weight: normal;
font-size: 13px;
font-size: 0.813rem;
line-height: 1.375rem;
color: #7272f1;
text-align: left; }
I cannot apply the .typo--paragraph class directly to the <p> tags in some cases, as the CMS has limitations. However, in cases when I do apply the style directly, it works fine.
The HTML follows this structure.
<div class="typo--paragraph">
<p>Paragraph text</p>
</div>
It's working as expected in every other browser
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle