i am writing an article on WordPress.
when i choose heading 6 font size "which is the smallest font i have those issues:
1: the font become Bold
2: when i use bullet-list the spacing between the lines is too big
i want to have regular font and normal spacing and the edit must be at style.css file
li > ul {
margin-bottom: 0;
margin-left: 24px;
}
li > ol {
margin-bottom: 0;
margin-left: 35px;
}
ignore this link.
http://www.abdorefky.com/heading-6-issue/
If you don't want the h6 inside an li to be bold (which it is by default), you have to override it.
li h6 {
font-weight:normal;
}
If you want ALL h6 not to be bold.
h6 {
font-weight:normal;
}
Related
Good morning,
I would like to modify the CSS of my blog post pages, but if I do it, that change also the Woocommerce product pages description text, because both are identified as being "p".
p, ul, ol, pre, h1, h2, h3, h4, h5, h6, table, form {
margin-bottom: 20
px
;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;
}
Example of page where I like to change the text: https://librairiedamase.com/blog/quelle-bible-choisir/
Example of page where I like not to change the text (of description): https://librairiedamase.com/boutique/sainte-ecriture/bible-expliquee-et-commentaires/commentaire-des-psaumes-2/
Thank you in advance.
Try adding this to your css
#content > .entry > * {
margin-bottom: 20px;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;
}
You need to prepend a single post body class before your target tags.
Example:
body.single-post p {
margin-bottom: 20px;
line-height: 1.786em;
font-size: 16px;
color: #2f2b35;}
This works great but unfortunately its applied globally. I want to apply the css to a specific page ID (75). If I add a class via the advanced tab in the block editor it breaks, no list icons.
.entry-content ul > li::before {
content: '\f0da';
color: #a86500;
font-family: 'Font Awesome 5 Free';
padding: 0 10px 0 0;
}
Any ideas?
You don't need to add a class. You should be able to target the page id which is already a class in the body tag. Inspect the page in DevTools and you should see the unique page-id-?? in the classes of the body tag then target like this:
.page-id-75 .entry-content ul > li::before {
content: "\f0da";
color: #a86500;
font-family: "Font Awesome 5 Free";
padding: 0 10px 0 0;
I am working on a website where I would like the paragraphs and h2 tags to have the same appearance visually.
I have looked through the code so many times but cannot see why they appear (ever so slightly) different.
I am hoping a fresh pair of eyes may be able to spot it. I want the h2 tag to be styled the same as the paragraphs.
The website is here.
h2{
padding-bottom: 5px;
color: #808080;
**letter-spacing: -1px;**
line-height: 1em;
font-weight: normal;}
have letter-spacing: -1px; for p element and it will appear the same
Your header tags have a letter spacing of -1px (defined in style.css on line 56):
h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #808080; letter-spacing: -1px; line-height: 1em; font-weight: normal; }
I was able to determine this using Chrome's developer tools by inspecting the h2 and the p tags in the Elements panel, and looking through the computed styles in the Styles tab to see what's different about them. I noticed the h2 has letter-spacing, whereas the p does not:
It's about CSS trick.
For example:
<style>
body {
font-size:12px;
line-height:1.100;
font-family:arial;
}
h2 {
font-size:12px;
font-weight:300;
line-height:1.100;
display:inline;
font-family:arial;
}
</style>
we need <h2>our product</h2>
The focus you should take notice is the size of font, font-weight and display. Hoe this helps
Demo here
If you need the h2 tag inside the p tag
DEMO
My knowledge of CSS is almost non-existent, but I'm trying to spruce up a Wordpress site and can't seem to get my text to be both a certain width and right aligned. Either one works on its own, but when I use
p{text-align: right;}
p {height:100px; width:300px;}
the width is correct but the alignment goes back to default (left). I'm sure this is not even how to make this effect work, but again this is pretty foreign to me and I appreciate any help.
The Wordpress theme has a box for custom CSS, and just for the sake of completeness this is everything I'm using:
body {color:#757575;}
h1.site-title {color:#ff0000;}
p{font-family: Verdana, Geneva, sans-serif;}
p{text-align: right;}
p {height:100px; width:300px;}
h1.site-title {
font-family: Century Gothic, sans-serif;}
h2{font-family: Century Gothic, sans-serif;}
h2{color:#000000;}
h2{text-align:right}
nav {font-family: Century Gothic, sans-serif;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}
Maybe the Wordpress css has a css rule that overrides yours. Keep in mind that if the theme css have eg. this css rule:
.paragraph p{
text-align: left;
}
and below that you add this rule:
p{
text-align: right;
}
Even if you put your rule as the last one, it has lesser priority than the theme one so the css rule applied will be the theme one.
Try to add the modifier important! so you'll have:
p{
text-align: right !important;
}
First, I'd recommend organizing your CSS so that all the P tags and all the H2 tags are in one set like changing this:
p {font-family: Verdana, Geneva, sans-serif;}
p {text-align: right;}
p {height:100px; width:300px;}
to
p { font-family: Verdana, Geneva, sans-serif; text-align: right; height:100px; width:300px; }
Next, there could be a theme issue. If you do want all of your paragraphs to align right on the entire site, adding the "!important" as Erwin suggested most likely will fix that.
In my site , there is a big space between each line . This is the css portions of that section. I have tried line-height but it is not working there.
#site-generator a {
color: #5D45A3;
font-weight: normal;
text-decoration: none;
}
You can check the site here . Check the footer area 'Latest News'. I would like to reduce the space between each post names.
Seems like you need to remove the height property from here:
.widget-area ul li {
font-size: 11px;
/* height: 23px; */ /* <- remove */
}
and here:
.widget ul li {
font-size: 11px;
/* height: 16px; */ /* <- remove */
}
Or set these heights as auto
Simply adapt the height value in your stylesheet to your needs.
Line-height should work to adjust the space between two lines.
.widget-area ul li {
font-size: 11px;
height: 16px; /* example */
line-height: 0.8em;
}
Press F12 in your favourite browser to access the developer console (I believe this works in the latest version of IE, FF and Chrome). Inspect the a element that has such an abnormal height. This shows that:
You are setting a line-height of 2.2em on #site-generator in style.css. If that style is deleted, it uses a line-height of 1.625 for body, input, textarea in style.css.
The distance between two li's in that menu is defined by .widget-area ul li and is 23px. If that style is deleted, the css for .widget ul li is used instead with a height of 16px.
You'll need to alter the first one to put the text of one link closer together. You'll need to alter the second one to put the different links closer together.
For the post titles use
#site-generator .widget_recent_entries a{
line-height:14px;
}
in
.widget-area ul li {width:auto !important;line-height:18px;}