I'm trying to remove the margin in the screenshot attached (see http://goo.gl/tbw4V), but I can't for the life of me see where it is in my WordPress stylesheet to remove it! I was hoping someone on hear could possibly help me? I have checked the H1, H2 tags, .bylines DIV and paragraph tags but nothing seems to be pushing the entry information approximately 15 pixels below the header. My website is at http://gracefulpostcards.com
Thanks for any help,
Steven.
To adjust these styles is highly recommended that you use the Firebug extension for Chrome or Firefox. So you can debug the html page and styles.
In your case, simply set the property margin-bottom of selector .singular .entry-title with 0:
.singular .entry-title {
margin-bottom: 0;
}
in style.css line 753
.hentry .entry-title {
margin: 0 0 0.6em 0;
}
Look in style.css, the style starting at line 753.
How I found it? Google Chrome -> Right click -> Inspect element.
The margin is defined under the selector .hentry .entry-title. It's margin: 0 0 0.6em 0. Just make it 0.
.featured {
margin-bottom: 20px;
}
Is the CSS rule you have to change.
If this is the page you are talking about : http://gracefulpostcards.com/why-start-a-personal-blog/#.UKGMi4csDng
then removing this CSS rule deletes the margin-bottom perfectly.
After inspecting your page, it seems that h2.entry-title has a margin-bottom
To fix this, add the following to your css:
h2 {
margin-bottom: 0px !important;
}
Related
I'm trying to increase the bottom padding of my headline in my blog and for some reason it is not being possible.
This is the code that I'm writing to increase the padding:
.post .type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
Entry-title and Entry-content are the classes for H1 element.
Here is the link of the page where this issue exist -> https://www.writtenlyhub.com/writing-product-description/
I think this will help you in understand my problem better.
Please do help me out here.
Thanks
Simplest would be to use padding-bottom: 50px;
While there is nothing wrong in using shorthand, there is a recent video from Kevin Powell explaining some gotchas, I recommend you should watch it and some other videos on his channel.
.post .type-post would select an element with the class type-post, that is a descendant of an element with the class post - but you don't actually have that in your structure.
You have one element that has both classes - so the spacing between the two classes in your selector needs to be removed,
.post.type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
I wrote a simple html
<h1 class="one">Hello</h1>
When I check the margin for body element in Firefox (version 90.0.2 64 bit), I get 8px. This comes from default style sheet for the browser. I wanted to check this default style sheet given at resource://gre-resources/forms.css in Firefox. But I could not find margin: 8px for the body element. Can anybody help me understand this ?
The default style sheet for firefox is under resource://gre-resources/html.css and there you find:
body {
display: block;
margin: 8px;
}
(in my case at line 122)
I think you were looking for it in the wrong file, the margin for body comes from resource://gre-resources/html.css file.
body {
display: block;
margin: 8px;
}
check this image
I'm a bit of a newbie to programming so posting on here to find some help.
Had a quick question which I'm assuming is easily resolved through custom CSS.
If you check out this post on my WP site you will see the content disappearing through the header.
Can someone please advise what piece of CSS has made this happen and what element I need to alter to set a regular margin?
Thank you,
The line that is causing you trouble is this one:
h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
It comes from a blog css file as "http://www.beendorsed.com.au/blog?sccss=1&ver=4.3.1".
In that line, when you comment out the line "margin:-2em 0em 0.5em 1.5em;" (like this: "/* margin:-2em 0em 0.5em 1.5em; */"), all will go back to normal.
To add that style to one set of pages only ("blog posts", for instance):
If you need that margin on one page, or one set of pages (like blog posts), add a class to it, like .post, and in the css file add it too, like this:
.post h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
When you add posts (instead of pages), you'll see that the articles are classed as ".post" (probably), just like the ones you are currently seeing are ".page". (I'm guessing the class name. Test it, see what the actual class name is, and use that). Here you have the line that states that class:
<article id="post-21" class="post-21 **page** type-page status-publish hentry">
Try to modify margin value in you .post declaration.
.post {
max-width: 640px;
margin: 130px auto 0px auto;
font-size: 16px;
}
Line 1804 in your style.css file
If you want to apply this just to on, specific page then do:
#post-104 .post {
margin-top: 130px;
}
You could change the #primary definition to be
#primary {
float: right;
width: 66.6666%;
margin-top: 100px
}
adding the margin-top there. You should get used to identifying the elements in a debug session in the browser to help you understand which element you are targeting.
Note that as I went through your CSS, I saw that you have some merge artifacts in the CSS, things like
>>>>>>> Another_Merge_test
which are not helping things for you.
I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.
Short solution:
* {
margin: 0;
padding: 0;
}
/* your styling */
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox:
-moz-padding-start: 0px;
I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).