We are using twenty sixteen word press theme.
The theme has lot of header and footer spaces which would like to remove.
Eventhough we didn't provide any banner or any other images it still have more spaces before the table gets generated in the page or page content
any suggestion on how or where to fix this?
Thanks.
You can just right click on the empty space annoying you and click inspect in chrome. It will show you something like this...
Here... Faint Green outline is the padding... this is causing that annoying whitespace,
.site-header {
padding: 5.25em 4.5455%;
}
Just kill it with CSS, you need higher specificity ( Learn more here https://developer.mozilla.org/en/docs/Web/CSS/Specificity ) for beginners simply prefix body before selector and it will have higher specificity and will work like a charm...
body .site-header {
padding: 0;
}
You can also use !important...
.site-header {
padding: 0 !important;
}
Using !important is not a good practice coz it breaks the heirarchy but since you are designing the site not writing a plugin it's up to you ;)
You can use this for any element, try yourself for footer 😉
You can add the CSS by using a plugin like https://wordpress.org/plugins/simple-custom-css/
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I'm using Wordpress>Atahualpa Theme>Recent Posts Widget Extended on my site toawaken.org.
Recent Posts are listed in the r.h. sidebar. I have added a "bullet" (disc) in front of each Post title. When I did so, it threw the spacing off.
If you link to my site, you will see for some reason the added bullet is forcing the text to appear one line below the bullet, instead of right next to it, on the same line as the bullet, as it should. I want the post's title to line up on the same line as the bullet, not one line below it. I tried adjusting margins/padding in the CSS editor, but no margin/padding combination changed this. Nor did changing the div list-style-position from inside to outside:
div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}
If anyone could please check the sidebar on my site and offer a remedy, would be much appreciated.
This plugin seems to have a clearfix implemented in the <li> elements, and it's pushing headers to the next line. You can override it with this CSS:
.rpwe-clearfix:before, .rpwe-clearfix:after {
content: none;
}
As a side note, try not to use so much !important expression in your stylesheets. You'll end up having more and more difficulties changing the CSS rules. If you want to everride certain rule, you use a selector with just a bit stronger specificity than the one you want to change.
You can read more about selectors' specificity here.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.
I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:
body {
font-size: 16px;
padding-top: 10px;
background-image: url("../assets/back14.gif");
}
This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.
Can I fix this behaviour or apply the background in a better way?
Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/
Otherwise, not that hard of an override:
.nav-stacked > li > a {
background-color:#ffffff;
}
​
But still seems like something that should be in there as an option.
JSFiddle
I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}